Data Grid (Table)

Linton Ye

Data Grid (Table)

A data grid/table component that helps you design data grids with real data. This is a proof of concept based on react-table. It only scratches the surface of what’s possible, but it seems already useful!

Demo file

Click here to download the demo file.

Tutorials

See this post.

Supported features

  • Import JSON and CSV files
  • Customize many table properties such as font sizes, colors, dividers, borders, padding, gap.
  • Multiple presets (as different components)
  • Advanced customization via Overrides
  • Pagination

Possible future features

Like I said, the current version of this package only scratches the surface of what’s possible.

In addition to more controls for the styles, an exciting possibility is that we can make the table interactive!

  • Sticky header and columns
  • Sorting
  • Resizing columns
  • Filtering
  • …, basically anything supported by react-table is a possibility

Source code & Report issues

Github Repo

Contact

Find me on Twitter. Share with me what you build, I’d be thrilled to see it!

Change log

  • Feb 18, 2020
    • Allow overriding data prop
  • Feb 12, 2020
    • Fix an issue that occurs after installing another package
    • Make the package work in Framer Beta
  • November 20, 2019
    • Pagination
  • November 13, 2019
    • Configurable showDefaultColumns
    • Expandable rows
  • November 11, 2019
    • Support rowProps
  • November 10, 2019
    • First version