https://github.com/commercetools/advanced-data-tables-demo

Demos for combining React Virtualized and FixedDataTable
https://github.com/commercetools/advanced-data-tables-demo

Last synced: about 1 year ago
JSON representation

Demos for combining React Virtualized and FixedDataTable

• Host: GitHub
• URL: https://github.com/commercetools/advanced-data-tables-demo
• Owner: commercetools
• Created: 2016-11-14T14:43:12.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-04-12T15:46:50.000Z (about 2 years ago)
• Last Synced: 2025-04-20T15:17:54.071Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://commercetools.github.io/advanced-data-tables-demo/
• Size: 3.9 MB
• Stars: 48
• Watchers: 69
• Forks: 9
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Virtualized + FixedDataTable

> Examples of how to combine React Virtualized and FixedDataTable to build a truly flexible and customizable data table in React.

![table in action](https://cl.ly/203l3P1N0u2H/Screen%20Recording%202016-11-17%20at%2011.27%20AM.gif)

## Live Playground

For examples of the table in action, go to https://commercetools.github.io/advanced-data-tables-demo/ 👀✨.

OR

To run that demo on your own computer:

```bash

$ git clone git@github.com:commercetools/modern-data-tables-demo.git

$ cd modern-data-tables-demo

$ npm install

$ npm start

$ open http://localhost:9000/

```

## Components

This repository contains some important components that the table is made up of:

- `Table`: composes `CellMeasurer`, `TableMeasurer` and `FixedDataTable`.

- `TableMeasurer`: Is used for providing FixedDataTable with static column width and row height values. Uses CellMeasurer's measuring callbacks to figure out the column widths and row heights of the whole table.

- `BodyCell`: Used for rendering a cell. Decoupled from Table.

- `SortHeaderCell`: Used to render the column header cell when a column is sortable.