@kofile/react-a11y-table

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

@neezer