import React from 'react' ; import { Table } from 'antd' ; import ProTable from '@ant-design/pro-table' ; import './App.css' ; import useARH from '@minko-fe/use-antd-resizable-header' ; import '@minko-fe/use-antd-resizable-header/dist/style.css' ; import 'antd/es/table/style/index.css' ; import { useReducer } from 'react' ; import { useMemo } from 'react' ; const data = [ ] ; for ( let i = 0 ; i < 100 ; i ++ ) { data . push ( { key : i , name : `Edrward ${ i }` , age : 32 , x : i , y : i , address : `London Park no. ${ i }` , } ) ; } function App ( ) { const [ x , setX ] = useReducer ( ( s ) => s + 1 , 0 ) ; const columns = useMemo ( ( ) => [ { title : 'Name' , width : 100 , dataIndex : 'name' , key : 'name' , fixed : 'left' , } , { title : 'Age' , width : 100 , dataIndex : 'age' , key : 'age' , } , { title : 'x' , width : 100 , dataIndex : 'x' , key : 'x' , } , { title : 'y' , width : 100 , dataIndex : 'y' , key : 'y' , } , { title : 'Column 1' , dataIndex : 'address' , } , { title : 'test render' , dataIndex : 'testRender' , width : 200 , render : ( ) => { return < div onClick = { ( ) => setX ( ) } > { x } < /div>; } , } , { title : 'Action' , key : 'operation' , fixed : 'right' , width : 100 , render : ( text , record ) => { return < span > { record ?. age } < /span>; } , } , ] , [ x ] ) ; const { components , resizableColumns , tableWidth } = useARH ( { columns , columnsState : { persistenceType : 'localStorage' , persistenceKey : 'tttt' , } , } ) ; return ( < div className = "App" > < Table columns = { resizableColumns } components = { components } dataSource = { data } scroll = { { x : tableWidth } } > < /Table> { } < /div>); } export default React . memo ( App ) ;