react-data-components alternatives and similar libraries
Based on the "Table / Data Grid" category.
Alternatively, view react-data-components alternatives based on common mentions on social networks and blogs.
-
react-data-grid
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like. -
fixed-data-table
A React table component designed to allow presenting thousands of rows of data. -
react-bootstrap-table
It's a react table for bootstrap. -
mui-datatables
Advanced and Pretty Data Tables where everything is customisable. -
griddle-react
Simple Grid Component written in React. -
reactable
Fast, flexible, and simple data tables in React. -
autoresponsive-react
Auto Responsive Layout Library For React. -
react-pivot
React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration. -
react-tabulator
React Tabulator is based on tabulator - an advanced table library with many useful features. -
sematable
Client side sorting, pagination, and text filter for redux/react based apps. -
gigatables-react
Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more. -
ka-table
https://komarovalexander.github.io/ka-table/#/overview -
ag-grid
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
Get performance insights in less than 4 minutes
Do you think we are missing an alternative of react-data-components or a related project?
README
react-data-components
DataTable: Live demo and source
SelectableTable: Live demo and source
Getting started
npm install react-data-components --save
This component requires Bootstrap stylesheet and Font Awesome fonts, in addition
to the [stylesheet for headers](css/table-twbs.css). If you are using Webpack
and the css-loader you can also require the css
with require('react-data-components/css/table-twbs.css').
Using the default implementation
The default implementation includes a filter for case insensitive global search, pagination and page size.
var React = require('react');
var ReactDOM = require('react-dom');
var DataTable = require('react-data-components').DataTable;
var columns = [
{ title: 'Name', prop: 'name' },
{ title: 'City', prop: 'city' },
{ title: 'Address', prop: 'address' },
{ title: 'Phone', prop: 'phone' }
];
var data = [
{ name: 'name value', city: 'city value', address: 'address value', phone: 'phone value' }
// It also supports arrays
// [ 'name value', 'city value', 'address value', 'phone value' ]
];
ReactDOM.render((
<DataTable
keys="name"
columns={columns}
initialData={data}
initialPageLength={5}
initialSortBy={{ prop: 'city', order: 'descending' }}
/>
), document.getElementById('root'));
See [complete example](example/table/main.js).