react-reusable-table
Advanced tools
A reusable responsive react.js table component with sorting and filtering options. Sorting and filtering can be configurable easily with column items of data.
Demo
https://reusable-table-component.firebaseapp.com/
Usage
Use react-reusable-table as below.
import React from 'react'
import { Table } from 'react-reusable-table'
const App = () => (
<div className="App">
<Table
caption=""
data={this.props.records}
detailPage={this.detailPageHandler}
footerCells={utility.getHeaderCells()}
headerCells={utility.getHeaderCells()}
showFooter={false}
sortedUporDown={this.sortRecordsHandler}/>
);
// utility.js
// getHeaderCells method
export const getHeaderCells = () => {
return [
{ label: 'ID', name: 'id', isFilterAble: false, isSortAble: false },
{ label: 'Status', name: 'status', isFilterAble: true, isSortAble: false },
{ label: 'Machine Type', name: 'machine_type', isFilterAble: true, isSortAble: false },
{ label: 'Longitude', name: 'longitude', isFilterAble: false, isSortAble: true },
{ label: 'Latitude', name: 'latitude', isFilterAble: false, isSortAble: true },
{ label: 'Last Maintenance', name: 'last_maintenance', isFilterAble: false, isSortAble: true },
{ label: 'Install Date', name: 'install_date', isFilterAble: false, isSortAble: true },
{ label: 'Floor', name: 'floor', isFilterAble: true, isSortAble: false }
]
}
// sort records in asc or desc order
sortRecordsHandler = (colName, sortType) => {
this.props.onSortRecords(colName, sortType);
}
// go to detail page
detailPageHandler = (id) => {
this.props.history.push('records/' + id);
}
// sample records
{
"data": [
{
"status": "running",
"machine_type": "microscope",
"longitude": 48.09540056785246,
"latitude": 11.523880271993598,
"last_maintenance": "2017-04-01T15:00:00.000000Z",
"install_date": "2015-04-18",
"id": "68015cc1-3119-42d2-9d4e-3e824723fe03",
"floor": 5
},
{
"status": "running",
"machine_type": "microscope",
"longitude": 48.09535029616455,
"latitude": 11.523869432452495,
"last_maintenance": "2017-04-01T14:00:00.000000Z",
"install_date": "2015-04-11",
"id": "59d9f4b4-018f-43d8-92d0-c51de7d987e5",
"floor": 4
}
]
}
Sorting & Filtering
Sorting and filtering can be configurable using any column items from the records. In the above configurable method getHeaderCells there are two flags isFilterAble and isSortAble can be set for each of the column items for records. So setting true any of them will enable the filter or sort option for column items.
Installation
npm
npm i react-reusable-table --save
yarn
yarn add react-reusable-table
FAQs
Reusable table component for reactjs
We found that react-reusable-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
