react-tabletrim v0.1.3

react-tabletrim

TableTrim makes data tables more responsive by allowing you to "trim" the table at smaller widths. When the table is trimmed, the table is reduced to two columns. The sticky column is always shown and is always printed as the first column. The second column is the active column. The active column can be changed via several optional built-in control elements or by manually setting/updating the activeCol prop on the TableTrim component.

Visit http://tabletrim.ponysmith.com for more documentation and examples.

Install

npm install --save react-tabletrim

Usage

The only required prop to use TableTrim is the data prop. See below in the docs for the required shape of the data object. Additional optional props can be set as well. The additional options are referenced below in the docs as well.

Basic Usage

import React from 'react'
import TableTrim from 'react-tabletrim'

const data = {
  // Properly formatted data object. See docs.
}

const App = () => {
  return (
    <React.Fragment>
      <TableTrim data={data} />
    </React.Fragment>
  )
}

Data object format

The required data prop should be an object with the following format:

const data = {
  header: {
    cells: [
      { content: "Col 1" },
      { content: "Col 2" },
      { content: "Col 3" },
      { content: "Col 4" }
    ]
  },
  body: {
    rows: [
      { 
        cells: [
          { content: "Col 1" },
          { content: "Col 2" },
          { content: "Col 3" },
          { content: "Col 4" }
        ]
      },
      // Additional rows
    ]
  }
}

For TableTrim to function properly, both the header and body objects must be present and properly formatted. In addition, the number of columns in the header object should match the number of columns in all rows of the body object. In other words, there is no way for TableTrim to support HTML constructs like colspan and rowspan.

Optional props

In addition to the required data prop, TableTrim supports a handful of optional props to customize the behavior of the component. The optional props are detailed below:

Styling

TableTrim does not include any styling. It does, however, set multiple classes on the various elements that you can tie your own custom CSS to if you wish.