@kofile/react-a11y-table
v2.0.0
Published
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Build Status](https://travis-ci.org/kofile/react-a11y-table.svg?branch=master)](https://travis-ci.org/kofile/react-a11y-table) [![Cove
Downloads
26
Maintainers
Keywords
Readme
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, } } } ] }