@kofile/react-a11y-table

2.0.0 • Public • Published

react-a11y-table

JavaScript Style Guide Build Status Coverage Status @kofile/react-a11y-table Commitizen friendly

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

Readme

Keywords

none

Package Sidebar

Install

npm i @kofile/react-a11y-table

Weekly Downloads

5

Version

2.0.0

License

MIT

Unpacked Size

101 kB

Total Files

27

Last publish

Collaborators

  • studio-eng-ops
  • vladimir.salvador
  • sergio.garcia
  • sergioatgovos
  • lilia.tirado
  • pantelissd
  • hd-kofile
  • oliverhoff
  • fernandofgovos
  • bwgovos
  • juandagovos
  • matt_huntsberry
  • chrisburch-govos
  • rarzate
  • narekdaghlaryan
  • kofilesystems
  • neezer
  • scottkof
  • jbalfantz
  • ngraves
  • arturhovhannisyan1994volo
  • rachel-ftw
  • warrenyoungkofile