Data Grid (Table)

Linton Ye

Open in Framer X

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!

Click here to download the demo file.

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 (Docs coming soon.)

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
  • Pagination
  • …, basically anything supported by react-table is a possibility

Contact

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

Change log

  • November 20, 2019
    • Pagination
  • November 13, 2019
    • Configurable showDefaultColumns
    • Expandable rows
  • November 11, 2019
    • Support rowProps
  • November 10, 2019
    • First version
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree