====== RTable is React component for fast rendering table data.
- Fast and simple render or data based on data and definitions array
- Support for filtering and row selection
- All event are fired with support of PubSub so that component is responsible only for rendering and nothing else
- Supplied as UMD module. So that you can use it as plain include, Require or common.js module
0.6.1-alpha
RTable has only following dependencies
For simple use you only need to clone git
$ git clone https://github.com/dlebedynskyi/RTable RTable
Or Use bower component
bower install -S rtable
Since RTable is supplied as UMD module you can reference it in several ways
- By simply adding it to page
` <script src="./bower_components/rtable/dist/rtable.min.js"></script>
` In this case RTable will look for 2 dependencies - React and Pubsub.
- using require.js AMD module
- as Common JS module. You may find Common JS modules in cjs folder
You can mount component to DOM using standard React methods
var settings = {},
reactElement = React.createElement(RTable.Component, settings);
React.render(reactElement, document.getElementById('app'));
Following setting are supported to set as settings.
var settings = {
//Array with data rows for table. Order sensitive
//React.PropTypes.arrayOf(React.PropTypes.object)
data : [], //default is empty array
//Columns definitions. Order sensitive
//React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.string),React.PropTypes.arrayOf(React.PropTypes.object)])
definitions : [], //default is empty array
//Property that defines where in data object to look for values to display.
//example. If dataProp === 'values' then each object in data array need to have {values : { ...} } as a place to store values for columns
//React.PropTypes.string
dataProp : '.',//defualt is '.' - points that root of data object will be used to look for values
// In case definition of column is an object
//Property that will be looked for in each column object to use as property name to look for in data item.
//example. If columnFieldValueProp === 'field' then each column will have following { field :'testName', name :'Test Name' }. This will allow to get values from data array as data[i]['testName'] to be displayed
//React.PropTypes.string
columnFieldValueProp : 'field', //default is 'field'
// In case definition of column is an object
//Property that will be looked for in each column object to use as property name to look for in data item.
//example. If columnNameProp === 'name' then each column will have following { field :'testName', name :'Test Name' }. This will display column header as Test Name
//React.PropTypes.string
columnNameProp : 'name', //default is 'name'
//Should filters row be displayed.
//React.PropTypes.bool
enableFilters : true,
//Should the selection check-boxes be displayed before each row.
//React.PropTypes.bool
enableSelection : true,
//css classes to be added to table css class definition
//React.PropTypes.string
classes : '',
//Table performance optimisation flag.
//React.PropTypes.bool
optimization : true,
//should table apply fixed header and only body content scrolling.
// This will add 'rtable-fixed-header' class to table css classes and will require correct css classes declarations.
fixedHeader : false
}
- Render simple table with pretty titles?
var settings = settings = { columnFieldValueProp : 'field', columnNameProp : 'title', dataProp : '.'},
reactElement = React.createElement(RTable.Component, settings),
component = React.render(reactElement, document.getElementById('app'));
//columns
var definitions = [{field : 'col_1', title : 'Column 1 '}, {field : 'col_2', title : 'Column 2 '}],
//rows
data = [{col_1 : 'TEST ROW 1 COL 1', col_2: 'TEST ROW 1 COL 2'},
{col_1 : 'TEST ROW 2 COL 1', col_2: 'TEST ROW 2 COL 2'}];
//updating props to render new values
component.setProps({definitions : definitions, data : data});
- Render table with fixed header ?
<!-- add following css styles -->
<link rel="stylesheet" type="text/css" href="bower_components/rtable/css/styles.css">
....
var settings = {fixedHeader : true},
reactElement = React.createElement(RTable.Component, settings);
React.render(reactElement, document.getElementById('app'));
- Render new values?
Simply callsetProps
with new values
//updated all
component.setProps({definitions : definitions, data : data});
//update only data
component.setProps({data : data});
//update colums only
component.setProps({definitions : definitions});
Please visit github pages if you need more demo and examples
Want to contribute? Great!
At the current moment I'm using gulp with gulp-pure-cjs Open your favorite Terminal and run these commands.
First Tab:
$ gulp build watch
Second Tab:
$ gulp test
- Write Tests
- Write documentation
- Add Code Comments
- Write Angular directive wrapper
- Rethink pubsub to a simpler one or another approach
- Implement columns resize and variable width