Top 10+ React JS Data Tables Examples

1. ReactTable HOC for draggable columns

Higher Order Component for ReactTable to enable Draggable columns for reordering or swapping positions.

*Note: This version supports V6 of React Table.

This is image title

View Demo: https://patricktran.github.io/react-table-hoc-draggable-columns/

Github: https://github.com/patricktran/react-table-hoc-draggable-columns

Download Link: https://github.com/patricktran/react-table-hoc-draggable-columns/archive/master.zip

2. Simple data-table component with React

Table It uses a number of open source projects to work properly:

[ReactJS] - HTML enhanced for web apps!
[Bootstrap] - great UI boilerplate for modern web apps
[Storybook] - great UI docs

This is image title

View Demo: https://emp-daisy.github.io/react-table-it/?path=/story/table--basic

Github: https://github.com/emp-daisy/react-table-it

Download Link: https://github.com/emp-daisy/react-table-it/archive/master.zip

3. React-based customizable style table or list components that support event

React-based customizable style table or list components that support event and callback functions.

This is image title

View Demo: https://www.xieyangogo.cn/react-tabllist/

Github: https://github.com/oceanxy/react-tabllist

Download Link: https://github.com/oceanxy/react-tabllist/archive/master.zip

4. A NPM package that helps creating HTML tables in a React-way

A NPM package that helps creating HTML tables in a React-way. It was partly inspired by react-table.

This is image title

View Demo: https://codesandbox.io/s/1o5m67xz5j

Github: https://github.com/DCCS-IT-Business-Solutions/react-table-plain

Download Link: https://github.com/DCCS-IT-Business-Solutions/react-table-plain/archive/master.zip

5. Responsive Table converts your table data to a user-friendly list in mobile view

React Super Responsive Table converts your table data to a user-friendly list in mobile view.

This is image title

View Demo: https://react-super-responsive-table.netlify.com/

Github: https://github.com/ua-oira/react-super-responsive-table

Download Link: https://github.com/ua-oira/react-super-responsive-table/archive/master.zip

6. A simple and powerful Datatable for React

Datatable for React based on material-ui’s table with additional features.

A simple and powerful Datatable for React based on Material-UI Table with some additional features.

This is image title

View Demo: https://mbrn.github.io/material-table/

Github: http://github.com/mbrn/material-table

Download Link: https://github.com/mbrn/material-table/archive/master.zip

7. A component that can be used to present data in table

Datagrid is a component that can be used to present data in table. It supports inline edit, action bar and lot more. Component is highly customizable to meet different use cases.

Underneath it uses originally Facebook’s, but later continued by Schrodinger fixed-data-table-2 react component, which is designed to handle large amounts amounts of data without sacraficing performance.

This is image title