@kofile/react-a11y-table

    0.3.5 • 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

    Keywords

    none

    Install

    npm i @kofile/react-a11y-table

    DownloadsWeekly Downloads

    54

    Version

    0.3.5

    License

    MIT

    Unpacked Size

    144 kB

    Total Files

    29

    Last publish

    Collaborators

    • akcapsis
    • kevinkofile
    • kofilesystems
    • neezer
    • ethanjstark
    • scottkof
    • jbalfantz
    • ngraves
    • arturhovhannisyan1994volo
    • rachel-ftw
    • warrenyoungkofile