Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@cbi/react-propertable
Advanced tools
Readme
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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).