@kofile/react-a11y-table

[![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

Stats

StarsIssuesVersionUpdatedCreatedSize
@kofile/react-a11y-table
0.3.52 years ago4 years agoMinified + gzip package size for @kofile/react-a11y-table in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.