import React from "react" ; import "antd/dist/antd.css" ; import "./index.less" ; import { Table } from "antd" ; import useARH from '@minko-fe/use-antd-resizable-header' ; import '@minko-fe/use-antd-resizable-header/dist/style.css' ; const columns = [ { title : 'Name' , dataIndex : 'name' , key : 'name' , width : 100 , fixed : 'left' , filters : [ { text : 'Joe' , value : 'Joe' , } , { text : 'John' , value : 'John' , } , ] , onFilter : ( value , record ) => record . name . indexOf ( value ) === 0 , } , { title : 'Other' , children : [ { title : 'Age' , dataIndex : 'age' , key : 'age' , width : 150 , sorter : ( a , b ) => a . age - b . age , } , { title : 'Address' , children : [ { title : 'Street' , dataIndex : 'street' , key : 'street' , width : 150 , } , { title : 'Block' , children : [ { title : 'Building' , dataIndex : 'building' , key : 'building' , width : 100 , } , { title : 'Door No.' , dataIndex : 'number' , key : 'number' , width : 100 , } , ] , } , ] , } , ] , } , { title : 'Company' , children : [ { title : 'Company Address' , dataIndex : 'companyAddress' , key : 'companyAddress' , width : 200 , } , { title : 'Company Name' , dataIndex : 'companyName' , key : 'companyName' , } , ] , } , { title : 'Gender' , dataIndex : 'gender' , key : 'gender' , width : 80 , fixed : 'right' , } , ] ; const data = [ ] ; for ( let i = 0 ; i < 100 ; i ++ ) { data . push ( { key : i , name : 'John Brown' , age : i + 1 , street : 'Lake Park' , building : 'C' , number : 2035 , companyAddress : 'Lake Street 42' , companyName : 'SoftLake Co' , gender : 'M' , } ) ; } const ResizableTable = ( props ) => { const { components , resizableColumns , tableWidth } = useARH ( { columns } ) ; return ( < Table columns = { resizableColumns } dataSource = { data } bordered size = "middle" components = { components } scroll = { { x : "calc(700px + 50%)" , y : tableWidth } } />); } ; export default ResizableTable ;