@cbi/react-propertable
Advanced tools
The dependencies of this project are abandoned right now but they will be updated as soon as possible. Thanks for understanding.
A Proper data table for React based on famous fixed-data-table from Facebook. This components add some functionality to the react-data-table of Facebook. The table was designed to handle thousands of rows of data without sacrificing performance even when it's sorted by some different columns at the same time.
The component is heavily opinionated and requires some external dependencies to be used in the browser.
Used technologies:
Features of ProperTable:
The compiled and compressed ProperTable distribution file can be found in the dist folder along with the css file. Add the default stylesheet dist/propertable.min.css, then import it into any module.
Run:
npm install
npm start
Check your http://localhost:8080/ or open http://localhost:8080/
npm test
formatter: function(value, colData, rowData) {
if (colData === null || rowData === null) { // Using formater for column filter so must return string or numeric
return ProperTable.formatters.number(value+1);
}
return (
<div>
<span>Number:</span> {value}
</div>
)
}
sortVal: function(value) {
return value.toString();
}
afterSort={function(data) {
console.log('Sorted data: ', data);
}}
afterSelect={function(data, selection) {
console.log('Selected rows: ', data);
console.log('Selected row ids: ', selection);
}}
{
column_1: 'ASC',
column_5: 'DESC'
}
{
column_1 : {
type: 'selection', // 'selection' or 'operation'
operationValue: 34, // Operation value. Ex: 'Jhon Snow'
operationType: 'bigger', // Operation type. Ex: 'equals', 'contains'...
selection: ['Jhon Snow', 'Jhon Smith', 'Walter White']
},
column_5 : {
type: col.filterType,
operationValue: col.operationFilterValue,
operationType: col.operationFilterType,
selection: col.selection
}
}
const cols = [
{
name: 'id',
label: 'ID',
field: 'id',
width: 50
},
{
name: 'col1',
...
<ProperTable idField="id" selected={[3,5,23]}.../>
<props.filterComponent
data={props.data} // Initial data Inmutable
rawdata={props.rawdata} // Raw data Inmutable
indexed={props.indexed} // initial Indexed Obj (indexed by)
selection={col.selection}
idField={col.field} // Field used as primary key or id
displayField={col.field}
lang={props.lang}
sort={col.sortDir}
uniqueId={props.uniqueId}
rowFormater={props.formatter}
// Your component must have this functions, one that return the new column selection, other one that return the new sort direction
// and last one if you want a button to clean this column filter. The last one applys a selection and then the sort direction of the
// second parameter.
afterSelect={afterSelect} // function afterSelect(selectionArray);
afterSort={afterSort} // function afterSort(sortDirection);
afterClear={afterClear} // function afterSort(selection, sortDirection) -> afterClear([], 'DEF')
/>
getColumnSettings(colSettings) {
console.log(colSettings);
}
render() {
let btnWithId, btnWithClassName, btnOutSide;
btnWithId = <button id='btn-clear' className="btn btn-primary" type="button"> Clear Filter & Sort</button>;
btnWithClassName = <button className="btn btn-primary clear" type="button"> Clear Filter & Sort</button>;
btnOutSide = document.getElementById('btn'); // An element rendered outside the current Component
return (
<div style={{width: '100%', height: '100%'}}>
{btnWithId || btnWithClassName}
<Table
key={this.props.key}
idField={this.props.idField}
uniqueId={3}
rowHeight={40}
selectable={this.props.selectable}
cols={this.props.cols}
data={this.props.data}
restartOnClick={btnWithId || btnWithClassName || btnOutSide}
/>
</div>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import ProperTable from 'ProperTable';
const cols = [
{
name: 'col1',
label: <span>A number</span>,
field: 'number',
fixed: true
},
{
name: 'nested',
label: 'Nested Columns',
children: [
{
name: 'nested1',
label: 'nested1',
field: 'nested1',
sortable: false,
sortVal: function(value) {
return moment(value).unix();
},
formatter: ProperTable.formatters.date
},
{
name: 'nested2',
label: 'nested2',
field: 'nested2'
}
]
}
];
// Table data
const data = [];
for (var i = 10; i > 0; i--) {
data.push({
col1: 'col-' + i,
nested1: '2016-05-16 02:00:0' + i),
nested2: 'abc' + i
});
}
// Render your table
ReactDOM.render(
<ProperTable.Table
key='TableKey'
uniqueId={1}
rowHeight={40}
cols={cols}
data={data}
afterSelect={
function(rows) {
console.log('selected', rows);
}
}
afterSort={
function(data) {
console.log('sorted data', data);
}
}
/>,
document.getElementById('example')
);
Use GitHub issues for requests.
Changes are tracked as GitHub releases.
FAQs
A proper data table for React
We found that @cbi/react-propertable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.