virtualizedtableforantd

The virtualized table component for ant design, using typescript.

Usage no npm install needed!

<script type="module">
  import virtualizedtableforantd from 'https://cdn.skypack.dev/virtualizedtableforantd';
</script>

README

The virtualized table component for Ant Design,fast and restorable.

npm npm

  • Install

NPM

npm i --save virtualizedtableforantd
  • All interfaces(hooks added in v0.7.x)

    
    // the param of the func VTComponents.
    interface vt_opts extends Object {
        readonly id: number;
        /**
         * @default 5
        */
        overscanRowCount?: number;
        /**
         * wheel event(only works on native events).
         * 滚轮事件(只对原生事件有效)。
         */
        onScroll?: ({ left, top, isEnd, }: {
            top: number;
            left: number;
            isEnd: boolean;
        }) => void;
        /**
         * @default false
        */
        destroy?: boolean;
        /**
         * @default false
        */
        debug?: boolean;
    }
    
    /* all APIs */
    export declare function VTComponents(vt_opts: vt_opts): TableComponents;
    export declare function setComponents(id: number, components: TableComponents): void;
    export declare function VTScroll(id: number, param?: {
        top: number;
        left: number;
    }): {
        top: number;
        left: number;
    };
    
  • Quick start

    You need to change your style like following if your Table.size is not default.

    如果你的Table.size不是默认的话,你需要修改像下面一样的style。

    // size={'small'}
    ant-table [vt] > table > .ant-table-tbody > tr > td {
        padding: 8px;
    }
    
    import React from 'react';
    import { Table } from 'antd';
    import { VTComponents } from 'virtualedtableforantd';
    
    // using in the antd table
    <Table
      scroll={{ y: 500 }} // it's important for using VTComponents!!!
      components={
        VTComponents({
          id: 1000,    /*the id is immutable*/
        })
      }
      columns={/*your columns*/}
      dataSource={/*your data*/}
    />
    
  • Restoring last state (including hooks version)

    import React, { PureComponent, useEffect } from 'react';
    import { Table } from 'antd';
    
    const ctx = { top: 0 };
    
    /* Class version. */
    class Users extends PureComponent {
      constructor(...args) {
        super(...args);
      }
    
      render() {
        return (
          <Table
            scroll={{ y: 500 }}
            components={VTComponents({
              id: 1000,
              onScoll: ({ left, top }) => ctx.top = top
              })
            }
          />
        );
      }
    
      componentDidMount() {
        VTScroll(1000, { top: ctx.top });
      }
    
      componentWillUnmount() {
        ctx.top = VTScroll(1000).top;
      }
    }
    

/* Hooks version. */
import React, { useEffect } from 'react';
import { Table } from 'antd';
import { useVT } from 'virtualedtableforantd';

const ctx = { top: 0 };
function Users() {

  const [
    VT,
    setComponents, // no longer needs the param id.
    VTScroll,      // no longer needs the param id.
    ] = useVT({ onScoll: ({ left, top }) => ctx.top = top });

  useEffect(() => {
    VTScroll({ top: ctx.top });

    return () => ctx.top = VTScroll().top;
  }, []);

  return (
    <Table
      scroll={{ y: 500 }}
      components={VT}
      columns={/*your columns*/}
      dataSource={/*your dataSource*/}
    />
  );
}

//--------- About
function About() {
  return "About...";
}

function App() {
  return (
    <>
      <NavLink to={'/users'}>Users</NavLink>
      <NavLink to={'/about'}>About</NavLink>
      <Switch>
        <Route component={Users} path="/users" />
        <Route component={About} path="/about" />
      </Switch>
    </>
  );
}
  • Editable Table

    there are 3 examples following:

  • support column.fixed

    
    const columns = [
      {
        title: 'Full Name',
        width: 100,
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
      },
      {
        title: 'Age',
        width: 100,
        dataIndex: 'age',
        key: 'age',
        fixed: 'left',
      },
      {
        title: 'Column 1',
        dataIndex: 'address',
        key: '1',
        width: 150,
      },
      {
        title: 'Column 2',
        dataIndex: 'address',
        key: '2',
        width: 150,
      },
      {
        title: 'Column 3',
        dataIndex: 'address',
        key: '3',
        width: 150,
      },
      {
        title: 'Column 4',
        dataIndex: 'address',
        key: '4',
        width: 150,
      },
      {
        title: 'Column 5',
        dataIndex: 'address',
        key: '5',
        width: 150,
      },
      {
        title: 'Column 6',
        dataIndex: 'address',
        key: '6',
        width: 150,
      },
      {
        title: 'Column 7',
        dataIndex: 'address',
        key: '7',
        width: 150,
      },
      { title: 'Column 8', dataIndex: 'address', key: '8' },
      {
        title: 'Action',
        key: 'operation',
        fixed: 'right',
        width: 100,
        render: => 'Action',
      },
    ];
    
    const data = [];
    for (let i = 0; i < 100; i++) {
      data.push({
        key: i,
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
      });
    }
    
    
    function renderTable() {
      return (
        <Table
          columns={columns}
          dataSource={data}
          scroll={{ x: 1500, y: 300 }}
          components={VTComponents({ id: 1000 })}
        />
      );
    }
    
    

  • Hooks APIs(new)
    
    function MyTable() {
      const [
        VT,
        setComponents, // no longer needs the param id.
        VTScroll,      // no longer needs the param id.
        ] = useVT(/*the same as `vt_opts`, but no longer needs the param id. */);
    
      return (
        <Table
          scroll={{ y: 500 }}
          components={VT}
          columns={/*your columns*/}
          dataSource={/*your data*/}
        />
      );
    }
    
    

License

MIT