README
Show Immutalbe.List data in tables using jss for styling
usage
file sheet.js
export default {
// default classNames
DataTable: {
// root
},
thead: {},
tbody: {},
tr: {},
trEven: {},
trOdd: {},
trh: {},
th: {},
td: {},
tdEmpty: {},
// your own classNames
thumb: {},
};
file pageWithTable.js
import React from 'react';
import DataTable from 'react-immutable-jss-data-table';
import sheet from './sheet.js';
// your jss injectSheet instance
import injectSheet from 'lib/sheet';
import tableColumns from './columns.jsx'
const columns = tableColumns.select('title', 'link', 'user', 'clickMe');
class MyPage extends React.PureComponent {
render() {
const { classes, list } = this.props;
return (
<div
className={classes.container}
>
<DataTable
classes={classes}
columns={columns}
items={list}
/>
</div>
);
}
}
export default injectSheet(sheet)(MyPage);
define table columns
You can use fieldPath: ['path', 'to', 'val', 'in', 'rowData']
(rowData.getIn(fieldPath)
will be used),
or define your own getValue
function, or even pass React component as render: CustomCellComponent
.
import React from 'react';
import I from 'immutable';
import { columnsSelector } from 'react-immutable-jss-data-table';
export const columns = {
// use rowIndex:
cell0: {
getValue: ({ rowIndex }) => `# ${rowIndex}`,
},
// add extra class, it will be searched in classes prop or cellClasses prop or used as is
cell1: {
className: 'my-own-class-name',
},
cell2: {
// you can cpecify how to extract data from entries (rowData.getIn(fieldPath))
fieldPath: ['article', 'title'],
// then you can change the value
getValue: ({ value }) => `Title: ${value}`,
},
cell3: {
// how to extract data from rowData,
fieldPath: ['article', 'title'],
// then you can change the value
getValue: ({ value, rowData }) => `Title: ${value}`,
// you can render cell using your own component
render: ({ value, rowData }) => <li children={'changed value: ' + value} />,
// React component also can be used
render: CustomCellComponent,
},
// if you whant to show column titles in table, please use 'title' prop
cell4: {
fieldPath: ['someField'],
// column title (th)
title: 'colum title',
// you can change default title, f.e. add items amout
getValueTh: ({ value, items }) => `${value} (${itmes.size})`,
// render th using your own component
renderTh: hoToRenderTh,
},
// you can change cell inner content markup using getValue:
link: {
fieldPath: ['article', 'url'],
getValue: ({ value }) => <Link to={value} />,
},
// use DataTable props (<DataTable user={user}/>)
user: {
fieldPath: ['userId'],
getValue: ({ classes, rowData, value, rowIndex, user }) =>
<div
className={classes.thumb}
children={users.getFullNameById(value)}
/>,
},
// change cell markup fully
clickMe: {
render: ({ className, classes, rowData, value, rowIndex, props }) =>
<div
className={className}
children={value}
onClick={() => props.toggleEditRow(rowIndex)}
/>
},
// see definition bellow
select: null,
};
columns.select = columnsSelector(columns);
export default columns;
available options for columns:
fieldPath
- array used for Immutable.getIn method to extract value from rowDataclassName
- custom className, used as additional className for cellgetValue
- func, returns node or string or number, that will be placed as child in cell nodegetValueTh
- func, returns node or string or number, that will be placed as child in th noderender
- func returns node, replaces cell root nodetitle
- will be used as column title (like table > th) if showColumnsTitles set to truegetValueTh
- allows to set column title using columnDef, and all DataTable propsrenderTh
- allows to render column, used as title for table, with your own React component- any other props, you can use in
render
,renderTh
,getValue
,getValueTh
,Cell
, ...
see properties for more details
see column definition examples
You can set your own component to render rows, or decide wich one to use
import DataTable, { Row } from 'react-immutable-jss-data-table';
const getRowRenderer = (props) => {
const { rowData, rowIndex, ...allDataTableProps } = props;
const Renderer = rowIndex === customRowIndex ? MyCustomRow : Row;
return <Renderer {...props} />
}
<DataTable
// ...
Row={getRowRenderer}
/>
Customise empty row component, default RowEmpty can be used for your purposes
import DataTable, { RowEmpty } from 'react-immutable-jss-data-table';
const CustomRowEmpty = (props) =>
rowIndex == 1 ? <MyEmptyRowComponent /> : <RowEmpty {...props} />;
<DataTable
// ...
RowEmpty={CustomRowEmpty}
/>
set your own Th / Cell components
import DataTable, { Th, Cell } from 'react-immutable-jss-data-table';
<DataTable
// ...
Th={Th}
Cell={Cell}
/>
THead component example
import DataTable from 'react-immutable-jss-data-table';
const THead = ({ children, classes, ...otherDataTableProps }) =>
<div className={classes.thead} children={children} />;
<DataTable
// ...
THead={THead}
/>
TBody component example
import DataTable from 'react-immutable-jss-data-table';
const TBody = ({ children, classes, ...otherDataTableProps }) =>
<div className={classes.tbody} children={children} />;
<DataTable
// ...
TBody={TBody}
/>
Exported components and helpers
import DataTable, {
// default getters
renderTh,
getValueTh,
getValue,
renderCell,
// components
Th,
TBody,
THead,
Row,
RowEmpty,
Cell,
DataTable,
// sheet example
sheet,
// helpers
getCellClassNames,
getThClassNames,
getRowClassNames,
getColumnDef,
columnsSelector,
} from 'react-immutable-jss-data-table';
properties
component | prop | type | description |
---|---|---|---|
DataTable | |||
columns | array | array with column definitions | |
items | I.List | Immutable.List with data for table | |
classes | object | jss classes | |
getRowClassNames | function | return array with classnames | |
getCellClassNames | function | return array with classnames | |
getThClassNames | function | return array with classnames | |
showColumnsTitles | boolean | display row.trh with titles.th | |
className | string | additional table className | |
Cell | component | component | |
Th | component | component | |
RowEmtpy | component | component | |
Row | component | component | |
renderTh | renderable | default fn for columnDef.renderTh |
|
getValueTh | renderable | default fn for columnDef.getValueTh |
|
getValue | renderable | default fn for columnDef.getValue for Cell |
|
render | renderable | default fn for columnDef.render for Cell |
|
defaultValue | any | defaultValue for Cell | |
Row | |||
rowIndex | integer | ||
rowData | I.Map | Immutable.Map with data for row | |
DataTable props | |||
TBody | |||
children | |||
DataTable props | |||
THead | |||
children | |||
DataTable props | |||
Th | |||
title | columnDef.title |
||
columnDef | columns.map(columnDef => ...) column options, column definition |
||
getValueTh | columnDef.getValueTh |
||
renderTh | columnDef.renderTh |
||
DataTable props | |||
Cell | |||
columnDef | object | columns.map(columnDef => ...) column options, column definition |
|
value | any | extracted by | |
rowData | I.Map | items.map(rowData => ...) |
|
rowIndex | integer | ||
render | component | ||
getValue | component | columnDef getValue | |
fieldPath | array | rowData.getIn(fieldPath) used later in columnDef getValue |
|
defaultValue | any | cell default value, returned by getValue |
|
DataTable props | |||
RowEmpty | |||
DataTable props |
getters
getter | prop | type | description |
---|---|---|---|
getValue | |||
value | any | ||
fieldPath | array | ||
rowData | I.Map | ||
rowIndex | integer | row order bumber based on 0 | |
columnDef | object | column options, column definition | |
DataTable props | |||
render | |||
value | any | ||
fieldPath | array | ||
rowData | I.Map | ||
rowIndex | integer | row order bumber based on 0 | |
className | string | ||
columnDef | object | column options, column definition | |
DataTable props | |||
getValueTh | returns title for table column | ||
value | any | columnDef.title column options |
|
columnDef | object | column options, column definition | |
DataTable props | |||
renderTh | |||
value | any | returned by getValueTh |
|
className | string | ||
columnDef | object | column options, column definition | |
DataTable props |
columnDef getValue
let value = rowData.getIn(fieldPath);
value = getValue ? getValue({ value, columnDef, rowData, rowIndex, ...props });
columnsSelector
// file ./columns.js
import { columnsSelector } from 'react-immutable-jss-data-table';
const COLUMNS_DEF = { title, link, user, clickMe, select: null };
COLUMNS_DEF.select = columnsSelector(COLUMNS_DEF);
export default COLUMNS_DEF;
// file with table
import DataTable from 'react-immutable-jss-data-table';
import tableColumns from './columns.js';
const columns = tableColumns.select('title', 'link', 'user', 'clickMe');
// in your component with table
<DataTable
columns={columns}
items={items}
...
/>
getColumnDef
// file ./columns.js
import { getColumnDef } from 'react-immutable-jss-data-table';
export default const COLUMNS_DEF = {
title, link, user, clickMe,
select: (...keys) => keys.map(col => getColumnDef(COLUMNS_DEF, col)),
};
// file with table
import DataTable from 'react-immutable-jss-data-table';
import tableColumns from './columns.js';
const columns = tableColumns.select('title', 'link', 'user', 'clickMe');
// in your component with table
<DataTable
columns={columns}
items={items}
...
/>