react-custable
rsuite-table
react-custable | rsuite-table | |
---|---|---|
1 | 2 | |
1 | 704 | |
- | 0.3% | |
0.0 | 6.8 | |
almost 2 years ago | 14 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-custable
-
A light react table package
import { Table } from 'react-custable'; //the fieldName should be as same as data's key const column = [ { fieldName: 'name', title: 'Name', width: '180px', sortable: true }, { fieldName: 'email', title: 'Email', width: '180px', sortable: true }, ]; const data = [ { id: '1', name: 'name one', email: '[email protected]' }, { id: '2', name: 'name two', email: '[email protected]' }, ]; ; Enter fullscreen mode Exit fullscreen mode what's column props? the 'fieldName' is the key name of your data and 'title' is the table header for that data and these are mandatory. Optional column configuration width: you can assign certain width to each column sortable: this table can sort columns data if these are string sortFunc: if the column's data isn't string you can pass a function that knows how to sort your data. fixed: if you want to fixed the column for horizontal scroll (only work for first column or last column) render: if you want to render custom component, you should pass a function that get row (data of current row) and index (index of current row) and your function should return a Cell object { value: React.ReactNode, props: { [key: string]: string }, //props will be applied to td elemenet like colspan } Enter fullscreen mode Exit fullscreen mode As you've seen before 'data' and 'column' are mandatory for the table, let's see what are optional for the table Option Type Description fieldName* string data key title* string column header title width string(px) column width (Default is auto) fixed string ('left' or 'right') to fix column sortable boolean Default is false sortFunc ( a , b ) => number sort function should return -1 when a < b , 1 when a > b , 0 when a = b render (row, index) => Cell for rendering custom component in cell Option Type Description column* Column[] array of columns data* { id:string, ... }[] array of data isSelectable boolean to enable checkboxes for rows selectRowHandler (selectedRowIds) => void the callback function will receiver selected row IDs selectedRowKeys string[] default value for selected rows pagination { currentPage: number; totalCount: number; pageLimit: number; } values for table pagination pageChangeHandler (pageNumner: number) => void the callback for handle page changes rowClickHandler (row: Row) => void the callback for handle row click showLoading boolean show spinner over table Contribute this is the first version of my package, so feel free to contribute https://github.com/barzin144/react-custable
rsuite-table
-
Using material-table in React to build feature-rich data tables
rsuite-table has a wide range of features and is great for creating professional-looking tables. It supports almost all the features we we mentioned above but doesn’t have a download data option. Also, data grouping is not supported out of the box.
-
React Suite 5 Release Improved Support for Accessibility 🎉
Use react hooks to refactor the Table and improve the performance when the table scrolls. The onDataUpdated and bodyRef props are deprecated.
What are some alternatives?
Infinite Table React DataGrid - Infinite Table is the modern DataGrid for building React apps — faster.
react-bootstrap-table - A Bootstrap table built with React.js
ag-Grid - The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
React Data Grid - Feature-rich and customizable data grid React component
af-utils - Simple open-source tools that just work (usually fast)
Griddle - Simple Grid Component written in React
material-react-table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
mui-datatables - Datatables for React using Material-UI
fixed-data-table - A React table component designed to allow presenting thousands of rows of data.
react-tabulator - React Tabulator is based on tabulator - a JS table library with many advanced features.
shineout - 高性能React组件库
ka-table - Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more