/datatable

Configurable React based utility to render tables

Primary LanguageJavaScript

DataTable

Live Demo

Configurable React based utility to render tables

Setup

  • yarn
  • For development: yarn dev
  • For build: yarn run build
  • For testing: yarn run test

Deployment

  • included deploy.sh script which tests, builds then deploys to host.

Component Options

Available options:

  • filterable: allows filtering columns
  • pagination:
    • type: infinite or pages
    • pageSize
    • nextPageSize (for type infinite)
    • infiniteScrollBtn (for type infinite)
    • maxRows (for type infinite)
  • columns:
    • id
    • numeric (right aligns numeric)
    • longtext (adds ellipsis and on hover full text)
    • width
    • label
    • Header
    • Cell (custom Cell with onChange callback from which table data can be passed)
    • filterable
  • rows
  • onRowClick
  • onChange

Usage:

<DataTable
  onRef={ref => (this.datatable = ref)} // only works for the class based implementation
  filterable
  pagination={{
    type: "infinite", // ("infinite", "pages")
    pageSize: 20,
    //options below only applicable for type: "infinite"
    nextPageSize: 20,
    infiniteScrollBtn: false,
    maxRows: 60
  }}
  columns={[
    {
      id: "action",
      label: "Select",
      Header: ({ onChange }) => {
        return (
          <input
            type="checkbox"
            onChange={e => onChange({selectAllChecked: e.target.checked})}
            checked={this.state.selectAllChecked}
          />
        );
      },
      Cell: this.actionCell,
      filterable: false,
      width: "20px"
    },
    {
      label: "Id",
      id: "id",
      filterable: false,
      width: "100px"
    },
    {
      id: "albumId",
      label: "Album Id",
      width: "60px"
    },
    {
      id: "title", // Uniq ID to identify column
      label: "title",
      width: "32%",
      longtext: true
    },
    {
      id: "url",
      label: "Image",
      Cell: ({ row }) => <img src={row.url}>,
      filterable: false
    },
    {
      id: "thumbnailUrl",
      label: "Thumbnail",
      Cell: ({ row }) => <img src={row.thumbnailUrl}>,
      filterable: false
    }
  ]}
  rows={this.state.rows}
  onRowClick={this.onRowClick}
  onChange={this.onChangeDataTable}
/>

More info

  • Initially started with the class component for DataTable, then switched to functional component using custom hooks. Class implementation also there in code.
  • Infinite Scroll can load data infinitely as previous rows are unloaded being restricted by the pagination.maxRows parameter
  • Large No of rows can be handled as only the rows visible are loaded on DOM
  • Fetch API is used to load the data from the rest endpoint

Test cases

  • Have included the setup for doing snapshot testing and custom hooks testing using jest and enzyme.
  • Only a few test cases as of now.