Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
supertable
Advanced tools
A ReactJS table component which is fully featured, configurable & highly performant (or at least that is the intention).
This project relies on both ReactJS & ImmutableJS (thank you @facebook)
npm install supertable --save
import React from 'react';
import Immutable from 'immutable';
import SuperTable from 'supertable';
const fields = [
{name: 'fieldA', label: 'Field A'},
{name: 'fieldB', label: 'Field B'},
{name: 'fieldC', label: 'Field C'}
];
const someFakeData = Immutable.fromJS([
{_id: 1, fieldA: 'valueA1', fieldB: 99, fieldC: 'valueC1'},
{_id: 2, fieldA: 'valueA2', fieldB: 88, fieldC: 'valueC2'},
{_id: 3, fieldA: 'valueA3', fieldB: 77, fieldC: 'valueC3'}
]);
const MyDataTable = React.createClass({
render() {
return (
<SuperTable data={someFakeData}
fields={fields}
width={1000}
height={500} />
);
}
});
data (required) Immutable.List
of Immutable.Map
This should contain all of the data required for display. When data is fetched async
, it should be added to this same list. Re-using the same list with existing objects will allow for ===
equality test to work which means you get a little performance benefit.
const someFakeData = Immutable.fromJS([
{_id: 1, fieldA: 'valueA1', fieldB: 99, fieldC: 'valueC1'},
{_id: 2, fieldA: 'valueA2', fieldB: 88, fieldC: 'valueC2'},
{_id: 3, fieldA: 'valueA3', fieldB: 77, fieldC: 'valueC3'}
]);
fields (required) Array
of Object
Each object in this array represents a column which should be visible in the table.
width
is provided, this value is ignored. Defaults to 1const fields = [
{name: 'fieldA', label: 'Field A'},
{name: 'fieldB', label: 'Field B'},
{name: 'fieldC', label: 'Field C'}
];
width (required) Number
Width of the table in pixels.
height (required) Number
Height of the table in pixels
rowHeight (required) Number
Exact height of a row in pixels
cellRenderer Object
An Object
. This prop allows for custom rendering of any cell. Any properties on this object should be named exactly the same as their corresponding field name. The value must be a function which returns something which is renderable by React (String|React.Element).
Each function will be passed rowData
which is and Immutable.Map
containing data for the entire row.
NOTE: Only need to provide handlers when custom formatting is needed, otherwise it will default to just display as text
const cellRenderer = {
/*
* Render fieldB as currency
*/
fieldB: (rowData) => {
const value = rowData.get('fieldB');
return <span className="myCSSCurrencyClass">{'$' + value.toFixed(2)}</span>;
},
/*
* Add conditional formatting to fieldC
*/
fieldC: (rowData) => {
const value = rowData.get('fieldC');
const fieldBValue = rowData.get('fieldB');
const cellStyle = {
color: fieldBValue > 90 ? 'green' : 'red'
};
return <span style={cellStyle}>{value}</span>;
}
};
onLoadMore Function
A function. This function will be executed when the table has been scrolled and more data is required for display to the user. Use this to trigger any AJAX requests and the extra data should be added to your existing ImmutableList
and sent as a prop to the SuperTable
component.
loading Boolean
(default: false)
true
when there is a async
request in progress.
FAQs
React table component
We found that supertable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.