image.png

    1. import { BaseTable, useTablePipeline, features } from 'ali-react-table';
    2. import { Table } from 'antd';
    4. const dataSource = [
    5.   { prov: '湖北省', settled: 54406, flow: 4793, add: 1457, t: '2020-02-15 19:52:02' },
    6.   { prov: '广东省', settled: 1294, flow: 409, add: 2, t: '2020-02-15 19:52:02' },
    7.   { prov: '河南省', settled: 1212, flow: 390, add: 13, t: '2020-02-15 19:52:02' },
    8.   { prov: '浙江省', settled: 1162, flow: 428, add: 0, t: '2020-02-15 19:52:02' },
    9.   { prov: '湖南省', settled: 1001, flow: 417, add: 2, t: '2020-02-15 19:52:02' },
    10. ];
    12. const columns = [
    13.   { code: 'prov', name: '省份', width: 150, features: { sortable: true } },
    14.   { code: 'confirmed', name: '常住人口', width: 100, features: { sortable: true } },
    15.   { code: 'flow', name: '流动人口', width: 100, features: { sortable: true } },
    16.   { code: 'add', name: '新增人口', width: 100, features: { sortable: true } },
    17.   { code: 't', name: '最后更新时间', width: 180 },
    18. ];
    20. function App() {
    22.   // const pipeline = useTablePipeline({ components: { Table } })
    23.   const pipeline = useTablePipeline()
    24.     .input({ dataSource, columns })
    25.     .use(
    26.       features.sort({
    27.         mode: 'single',
    28.         // 默认排序的列
    29.         defaultSorts: [{ code: 'settled', order: 'desc' }],
    30.         highlightColumnWhenActive: true,
    31.       })
    32.     )
    33.     .use(
    34.       features.columnResize({
    35.         fallbackSize: 120,
    36.         handleBackground: '#ddd',
    37.         handleHoverBackground: '#aaa',
    38.         handleActiveBackground: '#89bff7',
    39.       }),
    40.     )
    42.   return (
    43.     <div style={{ padding: 24 }}>
    44.       <BaseTable {...pipeline.getProps()} />
    45.     </div>
    46.   );
    47. }
    49. export default App;
    52. // Table基本用法
    53. <BaseTable dataSource={dataSource} columns={columns} />