0.4.0 • Published 1 year ago
@kofile/react-a11y-table v0.4.0
react-a11y-table
Usage
import A11yTable from '@kofile/react-a11y-table';
import { connect } from 'react-redux';
const MyTable = ({ data, config }) => (
<div>
<h2>My awesome table!</h2>
<A11yTable
data={data}
config={config}
/>
</div>
);
const mapStateToProps = ({ data, config }) => {
const massagedData = formatData(data); // Turn your data into data schema below
const massagedConfig = formatConfig(config); // Turn your config into config schema below
return ({
data: massagedData,
config: massagedConfig,
});
};
export default connect(mapStateToProps)(MyTable);
Props
data
: An array of row data[ [row1col1Val, row1col2Val, ...], [row2col1Val, row2col2Val, ...], ]
config
: An object adhering to the following schema{ // options for all cells cellOptions: { on: { // Cell handlers get event, element and props click: (event, DOMElement, props) => { ... }, hover: (event, DOMElement, { isHovered, ...props }) => { ... }, } }, // options for all rows rowOptions: { on: { // Row handlers only get event and props click: (event, props) => { ... }, hover: (event, { isHovered, ...props }) => { ... }, } }, data: [ // config per column { order: 0, // the index of this column name: 'id', // the name of this column locked: true, // if this column is locked or not size: 100, // the default size of this column valueTransform: value => renderableValue, // transform the value to a renderable value }, { order: 1, name: 'name', locked: false, size: 200, // We can give each column specific // handlers for that column cellOptions: { on: { click, hover, } } } ] }
Contributors
0.4.0
1 year ago
0.3.5
5 years ago
0.3.4
6 years ago
0.3.3
6 years ago
0.0.0-semantically-released
6 years ago
0.3.2
6 years ago
0.3.1
6 years ago
0.3.0
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.0
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago