Skip to content

React components for efficiently rendering large tabular data

License

Notifications You must be signed in to change notification settings

Decathlon/react-table

Repository files navigation

@decathlon/react-table

React components for efficiently rendering large tabular data

A table with 15 000 rows and 1 000 columns (with sub rows, fixed rows and fixed columns)

A table with custom right click menu

Storybook

Installing

npm install -S @decathlon/react-table

Usage

import { Table } from "@decathlon/react-table";
import "@decathlon/react-table/dist/style/index.css";

 const rows = [
    {
      id: "header",
      isHeader: true,
      cells: [
        {
          id: "wawoo",
          value: "Wawooo!"
        },
        ...
      ]
    },
    {
      id: "row1",
      cells: [
        {
          id: "react",
          value: "React"
        },
        ...
      ]
    },
    ...
   ];

function MyComponent() {
  return (
    <Table
      id="table-id"
      rows={rows}
      columns={{ 0: { style: { justifyContent: "left" }, size: 200 } }}
      isVirtualized
      virtualizerProps={{
        fixedRows: [0],
        fixedColumns: [0],
        height: 500,
        width: 1000
      }}
    />
  );
}

Getting Started (Devs)

git clone ...
cd react-table
npm ci
npm run storybook

🚀 Storybook ready at http://localhost:9001/

Running the tests

npm run test
npm run lint

Contributing

PRs are welcome! You noticed a bug, a possible improvement or whatever? Any help is always appreciated, so don't hesitate opening one!

Be sure to check out the contributing guidelines to fasten up the merging process.

Active authors

See also the list of contributors who participated in this project.

License

This project is licensed under the Apache-2.0 License - see the LICENSE.md file for details