Install

npm install react-scroll-table

Example Usage

import ReactScrollTable from 'react-scroll-table';

const noteFormatter = (data) => {
  return <pre style={{
    margin: 0,
    whiteSpace: 'pre-line',
    fontFamily: 'Lato, sans-serif',
  }}>{data.text}</pre>;
};

const importantCellFormatter = (data) => {
  return data.favorite ? '*' : '';
};

const tableProps = {
  backgroundColor: '#0B76B2',
  borderColor: '#FF434D',
  columns: [
    {
      header: 'Favorite',
      sortable: true,
      accessor: 'favorite',
      width: '10%',
      render: importantCellFormatter,
    },
    {
      header: 'User',
      accessor: 'username',
      width: '30%',
      sortable: true,
    },
    {
      header: 'Quote',
      sortable: true,
      accessor: 'text',
      width: '40%',
      render: noteFormatter,
    },
    {
      header: 'Date',
      sortable: true,
      accessor: 'date',
      width: '20%',
      sortFunction: function (a, b, order) {
        return order === 'asc' ? new Date(b.date) - new Date(a.date) : new Date(a.date) - new Date(b.date);
      }
    }
  ],
  data: [{favorite: false, username: 'Luke Skywalker', text: 'He told me enough! He told me you killed him!', date: new Date().toDateString()},
    {favorite: true, username: 'Obi-Wan Kenobi', text: 'These aren\'t the droids you\'re looking for.', date: new Date(2014, 10, 5).toDateString()},
    {favorite: false, username: 'Darth Vader', text: 'I am your father.', date: new Date(2002, 1, 17).toDateString()},
    {favorite: true, username: 'C3PO', text: 'I suggest a new strategy, Artoo: let the Wookie win.', date: new Date(2000, 2, 28).toDateString()},
    {favorite: false, username: 'R2D2', text: 'Bleep bloop bleep.', date: new Date(1988, 6, 15).toDateString()},
    {favorite: false, username: 'Han Solo', text: 'Laugh it up, fuzzball!', date: new Date(1990, 4, 7).toDateString()},
    {favorite: true, username: 'Yoda', text: 'Try not. Do—or do not. There is no try.', date: new Date(2005, 6, 12).toDateString()},
    {favorite: false, username: 'Leia Organa', text: 'Help me Obi-Wan Kenobi, you\'re my only hope.', date: new Date(2012, 1, 27).toDateString()}],
  downIcon: <i className="fa fa-down"/>,
  maxHeight: 150,
  noDataText: 'no data here',
  shaded: true,
  shadedColor: '#2AB2FF',
  textColor: '#ffffff',
  upIcon: <i className="fa fa-up"/>
};

const ExampleApp = () => (
  <div style={{padding: 50}}>
    <h2>react-scroll-table</h2>
    <ReactScrollTable {...tableProps} />
  </div>);

Table Props:

| Name | Type | Default Value | Notes | | --- | --- | --- | --- | | backgroundColor | String (color name, hex value, RGB value) | | If shaded is set to true, then this will be the color of the table header. | | borderColor | String (color name, hex value, RGB value) | Black | | | columns | Array of column objects | | | | data | Array of data objects | | | | downIcon | JSX | | Icon to appear in header for descending sort. | | maxHeight | Number | | If this property is set, the table will scroll when its contents cause it to exceed this number. | | noDataText | String | | Text to show if the data property is empty. | | shaded | Boolean | | If set to true, the table will use backgroundColor starting with the header, and alternate the color of the rows with shadedColor. | | shadedColor | String (color name, hex value, RGB value) | | Color to be displayed every other row, starting with the first row of the body, if shaded is set to true. | | textColor | String (color name, hex value, RGB value) | Black | | | upIcon | JSX | | Icon to appear in header for ascending sort. |

Column Object Props:

| Name | Type | Default Value | Notes | | --- | --- | --- | --- | | accessor | String | | The property in the data that the table body will display. | | header | String | | The label the table header will display. | | render | Function | | Receives a row of data, returns a custom formatted string or JSX element. | | sortable | Boolean | False | Triggers the display of up/down carats in the column header and allows columns containing strings or numbers to be sorted alpha-numerically. If the column is a date value, you must pass a custom sort function via sortFunction. | | sortFunction | Function | | Allows customized sorting, for example sorting date time values. | | width | String (for percentage value) or Number (for pixel value) | | Determines the width of the column. |

Data Object:

An object of key value pairs. Each key can be assigned to a column in the table via the accessor property of a column object. The table body will display the value or what is returned from the function passed to the column object's render property.

Styling:

The class "react-clean-table-body" can be used to apply CSS styling to the table's scrollbar.

Inspiration

react-table