Wondering what’s next for npm?Check out our public roadmap! »

    react-inclusive-sortable-table

    1.1.0 • Public • Published

    react-inclusive-sortable-table

    An accessible, responsive, sortable table based off of Heydon Pickering's Sortable Table from Inclusive Components.

    NPM JavaScript Style Guide

    Read the artice! Data Tables

    This component displays a <table> on large viewports and a definition list <dl> on small viewports.

    Demo: https://benjamingrobertson.github.io/react-inclusive-sortable-table/

    Install

    npm install --save react-inclusive-sortable-table

    Usage

    import React, { Component } from 'react'
     
    import Table from 'react-inclusive-sortable-table'
     
    class Example extends Component {
      render () {
        const headers = ['Site', 'Founder', 'Inception', 'URL'];
     
        const rows = [
          [
            'CSS Tricks',
            'Chris Coyier',
            '2007',
            <a href="http://css-tricks.com">http://css-tricks.com</a>
          ],
          [
            'Smashing Magazine',
            'Vitaly Friedman and Sven Lennartz',
            '2006',
            <a href="https://www.smashingmagazine.com/">
              https://www.smashingmagazine.com/
            </a>
          ],
          [
            'A List Apart',
            'Jeffrey Zeldman',
            '1998',
            <a href="https://alistapart.com/">https://alistapart.com/</a>
          ],
          [
            'codrops',
            'Manoela Ilic and Pedro Botelho',
            '2009',
            <a href="https://tympanus.net/codrops/">
              https://tympanus.net/codrops/
            </a>
          ]
        ];
     
        return (
          <Table
            rows={rows}
            headers={headers}
            rowHeaders
            caption="Front end websites"
            sortable
            />
        )
      }
    }

    Props

    breakpoint

    An optional value, in pixels, of where you want the definition list to change to a table. The default is 400px. If you use the default setting, the breakpoints are managed in CSS.

    If you pass in a value, the component will add a debounced window resize listener for triggering the render.

    <Table
      breakpoint={500}
      rows={rows}
      headers={headers}
      rowHeaders
      caption="Front end websites"
      sortable
      />

    caption

    The title of your table. Will be wrapped in a <caption> for the table display and an <h2> for the definition list display.

    className

    An optional class name to use for custom styling. Will be added to the component wrapper.

    customArrow

    A render props method for using a custom arrow icon.

    Here is an example of how you override the arrow with a custom component:

    <Table
      customArrow={(sortDir, isCurrent) => (
        <p>
          {sortDir}, {isCurrent}
        </p>
      )}
      caption="Front end websites"
      headers={headers}
      rows={rows}
      sortable
    />
     

    The default arrow looks like this (it uses sortDirection and isCurrent to determine which way the arrow should point):

    let ascending = sortDir === 'ascending'
     
    return (
      <svg viewBox='0 0 100 200' width='100' height='200'>
        {!(!ascending && isCurrent) && (
          <polyline points='20 50, 50 20, 80 50' />
        )}
        <line x1='50' y1='20' x2='50' y2='180' />
        {!(ascending && isCurrent) && (
          <polyline points='20 150, 50 180, 80 150' />
        )}
      </svg>
    )

    customSort

    This should take an object, with the keys of the object reflecting the index of the array you want to sort, and the value reflecting the method you want to pass to Array.sort().

    Usage:

    <Table
      customSort={{
        // This will pass a custom sort method to the 2nd column.
        1: (a, b, sortDirection, index) => {
          // do your sorting here
        }
      }}
    />

    headers

    An array of table headers. Will be wrapped in <th> for the table display and <dt> for the definition list display.

    rowHeaders

    A boolean, determines whether or not to wrap the first column in each row in a <th> for the table display.

    It makes the font-weight bold.

    rows

    An array of arrays for each row, containing the data for the table.

    For example:

    [
      [
        'CSS Tricks',
        'Chris Coyier',
        '2007',
        <a href="http://css-tricks.com">http://css-tricks.com</a>
      ],
      [
        'Smashing Magazine',
        'Vitaly Friedman and Sven Lennartz',
        '2006',
        <a href="https://www.smashingmagazine.com/">
          https://www.smashingmagazine.com/
        </a>
      ],
      [
        'A List Apart',
        'Jeffrey Zeldman',
        '1998',
        <a href="https://alistapart.com/">https://alistapart.com/</a>
      ],
      [
        'codrops',
        'Manoela Ilic and Pedro Botelho',
        '2009',
        <a href="https://tympanus.net/codrops/">
          https://tympanus.net/codrops/
        </a>
      ]
    ];

    sortable

    Can be either a boolean or an array. By default, no columns will be sortable.

    boolean

    If it is passed without arguments (ie, <Table sortable />), all columns will be sortable.

    array

    To control what columns to sort, pass in an array containing the index of the columns you want to sort.

    For example, to sort the 2nd and 4th columns:

    <Table
      caption="Front end websites"
      headers={headers}
      rows={rows}
      sortable={[1, 3]}
    />

    Todos

    License

    MIT © benjamingrobertson

    Install

    npm i react-inclusive-sortable-table

    DownloadsWeekly Downloads

    7

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    97.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar