Nefariously Programmed Mecha

    virtualizedtableforantd
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.9 • Public • Published

    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

    Install

    npm i virtualizedtableforantd

    DownloadsWeekly Downloads

    677

    Version

    0.7.9

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    15

    Last publish

    Collaborators

    • wubooo