table-g

Enhanced table component based on antd with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

• Collapsible columns
• Smooth scrolling under big data
• Support in cell editing
• Support Infinite data loading

Usage

import React from 'react';
import Table from 'table-g';

function BasicUse() {
   const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      key: 'name',
      showTip: true,
    },
    {
      title: 'age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  const dataSource = useMemo(() => getList(), [])
  const [resizable, setresizable] = useState(true)

  const toggleResizable = useCallback(() => {
      setresizable(r => !r)
    },[])

  const headerRight = useMemo(() => {
    return <Button onClick={toggleResizable} >switch to resize columns</Button>
  }, [])

  return <Table
    columns={columns}
    dataSource={dataSource}
    resizable={resizable}
    headerRight={headerRight}
  />
}

React.render(<BasicUse/>, mountNode);

API

Documentation

Contact

• Create a Github issue for bug reports, feature requests, or questions
• Follow @GantFDT for announcements
• Add a ⭐️ star on GitHub to support the project❤️!

Anthor

GantFDT

License

MIT