joke2k/react-table

# Yarn
$ yarn add react-table

# NPM
$ npm install react-table

// ES6
import ReactTable from "react-table";
// ES5
var ReactTable = require("react-table").default;

// JS (Webpack)
import 'react-table/react-table.css'
// Old-school
<link rel="stylesheet" href="node_modules/react-table/react-table.css">

  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">

  <!-- JS -->
  <script src="https://unpkg.com/react-table@latest/react-table.js"></script>
  <script src="https://unpkg.com/react-table@latest/react-table.min.js"></script>

  <script>
    var ReactTable = window.ReactTable.default
  </script>

import ReactTable from 'react-table'

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  },{
    ...
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
  }, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
  }]

  <ReactTable
    data={data}
    columns={columns}
  />
}

<ReactTable
  data={[...]}
/>

<ReactTable
  data={myData} // The data prop should be immutable and only change when you want to update the table
  resolveData={data => data.map(row => row)} // But you can break immutability here because `resolveData` runs when the `data` prop changes!
/>

{
  // General
  data: [],
  resolveData: data => resolvedData,
  loading: false,
  showPagination: true,
  showPaginationTop: false,
  showPaginationBottom: true
  showPageSizeOptions: true,
  pageSizeOptions: [5, 10, 20, 25, 50, 100],
  defaultPageSize: 20,
  minRows: undefined, // controls the minimum number of rows to display - default will be `pageSize`
  // NOTE: if you set minRows to 0 then you get rid of empty padding rows BUT your table formatting will also look strange when there are ZERO rows in the table
  showPageJump: true,
  collapseOnSortingChange: true,
  collapseOnPageChange: true,
  collapseOnDataChange: true,
  freezeWhenExpanded: false,
  sortable: true,
  multiSort: true,
  resizable: true,
  filterable: false,
  defaultSortDesc: false,
  defaultSorted: [],
  defaultFiltered: [],
  defaultResized: [],
  defaultExpanded: {},
  defaultFilterMethod: (filter, row, column) => {
    const id = filter.pivotId || filter.id
    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
  },
  defaultSortMethod: (a, b, desc) => {
    // force null and undefined to the bottom
    a = a === null || a === undefined ? '' : a
    b = b === null || b === undefined ? '' : b
    // force any string values to lowercase
    a = typeof a === 'string' ? a.toLowerCase() : a
    b = typeof b === 'string' ? b.toLowerCase() : b
    // Return either 1 or -1 to indicate a sort priority
    if (a > b) {
      return 1
    }
    if (a < b) {
      return -1
    }
    // returning 0, undefined or any falsey value will use subsequent sorts or
    // the index as a tiebreaker
    return 0
  },
  PadRowComponent: () => <span>&nbsp;</span>, // the content rendered inside of a padding row

  // Controlled State Overrides (see Fully Controlled Component section)
  page: undefined,
  pageSize: undefined,
  sorted: [],
  filtered: [],
  resized: [],
  expanded: {},

  // Controlled State Callbacks
  onPageChange: undefined,
  onPageSizeChange: undefined,
  onSortedChange: undefined,
  onFilteredChange: undefined,
  onResizedChange: undefined,
  onExpandedChange: undefined,

  // Pivoting
  pivotBy: undefined,

  // Key Constants
  pivotValKey: '_pivotVal',
  pivotIDKey: '_pivotID',
  subRowsKey: '_subRows',
  aggregatedKey: '_aggregated',
  nestingLevelKey: '_nestingLevel',
  originalKey: '_original',
  indexKey: '_index',
  groupedByPivotKey: '_groupedByPivot',

  // Server-side callbacks
  onFetchData: () => null,

  // Classes
  className: '',
  style: {},

  // Component decorators
  getProps: () => ({}),
  getTableProps: () => ({}),
  getTheadGroupProps: () => ({}),
  getTheadGroupTrProps: () => ({}),
  getTheadGroupThProps: () => ({}),
  getTheadProps: () => ({}),
  getTheadTrProps: () => ({}),
  getTheadThProps: () => ({}),
  getTheadFilterProps: () => ({}),
  getTheadFilterTrProps: () => ({}),
  getTheadFilterThProps: () => ({}),
  getTbodyProps: () => ({}),
  getTrGroupProps: () => ({}),
  getTrProps: () => ({}),
  getThProps: () => ({}),
  getTdProps: () => ({}),
  getTfootProps: () => ({}),
  getTfootTrProps: () => ({}),
  getTfootThProps: () => ({}),
  getPaginationProps: () => ({}),
  getLoadingProps: () => ({}),
  getNoDataProps: () => ({}),
  getResizerProps: () => ({}),

  // Global Column Defaults
  // To override only some values, import { ReactTableDefaults } from 'react-table'
  // and construct your overrides (e.g. {...ReactTableDefaults.column, className: 'react-table-cell'})
  column: {
    // Renderers
    Cell: undefined,
    Header: undefined,
    Footer: undefined,
    Aggregated: undefined,
    Pivot: undefined,
    PivotValue: undefined,
    Expander: undefined,
    Filter: undefined,
    // Standard options
    sortable: undefined, // use table default
    resizable: undefined, // use table default
    filterable: undefined, // use table default
    show: true,
    minWidth: 100,
    // Cells only
    className: '',
    style: {},
    getProps: () => ({}),
    // Headers only
    headerClassName: '',
    headerStyle: {},
    getHeaderProps: () => ({})
    // Footers only
    footerClassName: '',
    footerStyle: {},
    getFooterProps: () => ({}),
    filterAll: false,
    filterMethod: undefined,
    sortMethod: undefined,
    defaultSortDesc: undefined,
  },

  // Global Expander Column Defaults
  // To override only some values, import { ReactTableDefaults } from 'react-table'
  // and construct your overrides (e.g. {...ReactTableDefaults.expanderDefaults, sortable: true})
  expanderDefaults: {
    sortable: false,
    resizable: false,
    filterable: false,
    width: 35
  },

  // Global Pivot Column Defaults
  pivotDefaults: {},

  // Text
  previousText: 'Previous',
  nextText: 'Next',
  loadingText: 'Loading...',
  noDataText: 'No rows found',
  pageText: 'Page',
  ofText: 'of',
  rowsText: 'rows',
}

import { ReactTableDefaults } from "react-table";

Object.assign(ReactTableDefaults, {
  defaultPageSize: 10,
  minRows: 3
  // etc...
});

<ReactTable
  defaultPageSize={10}
  minRows={3}
  // etc...
/>

[{
  // Renderers - For more information, see "Renderers" section below
  Cell: JSX | String | Function // Used to render a standard cell, defaults to the accessed value
  Header: JSX | String | Function // Used to render the header of a column or column group
  Footer: JSX | String | Function // Used to render the footer of a column
  Filter: JSX | cellInfo => ( // Used to render the filter UI of a filter-enabled column
    <select onChange={event => onFiltersChange(event.target.value)} value={filter ? filter.value : ''}></select>
    // The value passed to onFiltersChange will be the value passed to filter.value of the filterMethod
  )
  Aggregated: JSX | String | Function // Used to render aggregated cells. Defaults to a comma separated list of values.
  Pivot: JSX | String | Function | cellInfo => ( // Used to render a pivoted cell
    <span>
      <Expander /><PivotValue /> // By default, will utilize the the PivotValue and Expander components at run time
    </span>
  ),
  PivotValue: JSX | String | Function // Used to render the value inside of a Pivot cell
  Expander: JSX | String | Function // Used to render the expander in both Pivot and Expander cells

  // General
  accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)
  id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
  sortable: boolean, // Overrides the table option
  resizable: boolean, // Overrides the table option
  filterable: boolean, // Overrides the table option
  show: true, // can be used to hide a column
  width: undefined, // A hardcoded width for the column. This overrides both min and max width options
  minWidth: 100, // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
  maxWidth: undefined, // A maximum width for this column.

  // Special
  pivot: false,
  // Turns this column into a special column for specifying pivot position in your column definitions.
  // The `pivotDefaults` options will be applied on top of this column's options.
  // It will also let you specify rendering of the header (and header group if this special column is placed in the `columns` option of another column)
  expander: false,
  // Turns this column into a special column for specifying expander position and options in your column definitions.
  // The `expanderDefaults` options will be applied on top of this column's options.
  // It will also let you specify rendering of the header (and header group if this special column is placed in the `columns` option of another column) and
  // the rendering of the expander itself via the `Expander` property

  // Cell Options
  className: '', // Set the classname of the `td` element of the column
  style: {}, // Set the style of the `td` element of the column
  // Header & HeaderGroup Options
  headerClassName: '', // Set the classname of the `th` element of the column
  headerStyle: {}, // Set the style of the `th` element of the column
  getHeaderProps: (state, rowInfo, column, instance) => ({}), // a function that returns props to decorate the `th` element of the column

  // Header Groups only
  columns: [...], // See Header Groups section below

  // Footer
  footerClassName: '', // Set the classname of the `td` element of the column's footer
  footerStyle: {}, // Set the style of the `td` element of the column's footer
  getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer

  // Filtering
  filterMethod: (filter, row || rows, column) => {return true}, // A function returning a boolean that specifies the filtering logic for the column
    // 'filter' == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
    // 'row' || 'rows' == the row (or rows, if filterAll is set to true) of data supplied to the table
    // 'column' == the column that the filter is on
  filterAll: false
}]

{
  // Row-level props
  row: Object, // the materialized row of data
  original: , // the original row of data
  index: '', // the index of the row in the original array
  viewIndex: '', // the index of the row relative to the current view
  level: '', // the nesting level of this row
  nestingPath: '', // the nesting path of this row
  aggregated: '', // true if this row's values were aggregated
  groupedByPivot: '', // true if this row was produced by a pivot
  subRows: '', // any sub rows defined by the `subRowKey` prop

  // Cells-level props
  isExpanded: '', // true if this row is expanded
  value: '', // the materialized value of this cell
  resized: '', // the resize information for this cell's column
  show: '', // true if the column is visible
  width: '', // the resolved width of this cell
  maxWidth: '', // the resolved maxWidth of this cell
  tdProps: '', // the resolved tdProps from `getTdProps` for this cell
  columnProps: '', // the resolved column props from 'getProps' for this cell's column
  classes: '', // the resolved array of classes for this cell
  styles: '' // the resolved styles for this cell
}

const columns = [{
  Header: 'Favorites',
  headerClassName: 'my-favorites-column-header-group'
  columns: [{
    Header: 'Color',
    accessor: 'favorites.color'
  }, {
    Header: 'Food',
    accessor: 'favorites.food'
  }, {
    Header: 'Actor',
    accessor: 'favorites.actor'
  }]
}]

// This column uses a stateless component to produce a different colored bar depending on the value
// You can also use stateful components or any other function that returns JSX
const columns = [
  {
    Header: () => (
      <span>
        <i className="fa-tasks" /> Progress
      </span>
    ),
    accessor: "progress",
    Cell: row => (
      <div
        style={{
          width: "100%",
          height: "100%",
          backgroundColor: "#dadada",
          borderRadius: "2px"
        }}
      >
        <div
          style={{
            width: `${row.value}%`,
            height: "100%",
            backgroundColor:
              row.value > 66
                ? "#85cc00"
                : row.value > 33
                  ? "#ffbf00"
                  : "#ff2e00",
            borderRadius: "2px",
            transition: "all .2s ease-out"
          }}
        />
      </div>
    )
  }
];

<ReactTable
  getProps={fn}
  getTableProps={fn}
  getTheadGroupProps={fn}
  getTheadGroupTrProps={fn}
  getTheadGroupThProps={fn}
  getTheadProps={fn}
  getTheadTrProps={fn}
  getTheadThProps={fn}
  getTbodyProps={fn}
  getTrGroupProps={fn}
  getTrProps={fn}
  getThProps={fn}
  getTdProps={fn}
  getPaginationProps={fn}
  getLoadingProps={fn}
  getNoDataProps={fn}
  getResizerProps={fn}
/>

// When any Td element is clicked, we'll log out some information
<ReactTable
  getTdProps={(state, rowInfo, column, instance) => {
    return {
      onClick: (e, handleOriginal) => {
        console.log("A Td Element was clicked!");
        console.log("it produced this event:", e);
        console.log("It was in this column:", column);
        console.log("It was in this row:", rowInfo);
        console.log("It was in this table instance:", instance);

        // IMPORTANT! React-Table uses onClick internally to trigger
        // events like expanding SubComponents and pivots.
        // By default a custom 'onClick' handler will override this functionality.
        // If you want to fire the original onClick handler, call the
        // 'handleOriginal' function.
        if (handleOriginal) {
          handleOriginal();
        }
      }
    };
  }}
/>

// Any Tr element will be green if its (row.age > 20)
<ReactTable
  getTrProps={(state, rowInfo, column) => {
    return {
      style: {
        background: rowInfo.row.age > 20 ? "green" : "red"
      }
    };
  }}
/>

const columns = [{
  getHeaderProps: () => (...),
  getProps: () => (...)
}]

// This columns cells will be red if (row.name === Santa Clause)
const columns = [
  {
    getProps: (state, rowInfo, column) => {
      return {
        style: {
          background: rowInfo.row.name === "Santa Clause" ? "red" : null
        }
      };
    }
  }
];

<ReactTable
  ...
  pivotBy={['lastName', 'age']}
/>

// In this example, we use lodash to sum and average the values, but you can use whatever you want to aggregate.
const columns = [
  {
    Header: "Age",
    accessor: "age",
    aggregate: (values, rows) => _.round(_.mean(values)),
    Aggregated: row => {
      // You can even render the cell differently if it's an aggregated cell
      return <span>row.value (avg)</span>;
    }
  },
  {
    Header: "Visits",
    accessor: "visits",
    aggregate: (values, rows) => _.sum(values)
  }
];

<ReactTable
  data={data}
  columns={columns}
  defaultPageSize={10}
  SubComponent={row => {
    return (
      <div>
        You can put any component you want here, even another React Table! You
        even have access to the row-level data if you need! Spark-charts,
        drill-throughs, infographics... the possibilities are endless!
      </div>
    );
  }}
/>

<ReactTable
  ...
  data={this.state.data} // should default to []
  pages={this.state.pages} // should default to -1 (which means we don't know how many pages we have)
  loading={this.state.loading}
  manual // informs React Table that you'll be handling sorting and pagination server-side
  onFetchData={(state, instance) => {
    // show the loading overlay
    this.setState({loading: true})
    // fetch your data
    Axios.post('mysite.com/data', {
      page: state.page,
      pageSize: state.pageSize,
      sorted: state.sorted,
      filtered: state.filtered
    })
      .then((res) => {
        // Update react-table
        this.setState({
          data: res.data.rows,
          pages: res.data.pages,
          loading: false
        })
      })
  }}
/>

<ReactTable
  // Props
  page={0} // the index of the page you wish to display
  pageSize={20} // the number of rows per page to be displayed
  sorted={[{ // the sorting model for the table
      id: 'lastName',
      desc: true
    }, {
      id: 'firstName',
      desc: true
  }]}
  expanded={{ // The nested row indexes on the current page that should appear expanded
    1: true,
    4: true,
    5: {
      2: true,
      3: true
    }
  }}
  filtered={[{ // the current filters model
    id: 'lastName',
    value: 'linsley'
  }]}
  resized={[{ // the current resized column model
    "id": "lastName",
    "value": 446.25
  }]}

  // Callbacks
  onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user
  onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
  onSortedChange={(newSorted, column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
  onExpandedChange={(newExpanded, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expanded`
  onFilteredChange={(filtered, column) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFiltersChange handler by the Filter option.
  onResizedChange={(newResized, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
/>

<ReactTable data={data} columns={columns}>
  {(state, makeTable, instance) => {
    return (
      <div
        style={{
          background: "#ffcf00",
          borderRadius: "5px",
          overflow: "hidden",
          padding: "5px"
        }}
      >
        <pre>
          <code>
            state.allVisibleColumns ==={" "}
            {JSON.stringify(state.allVisibleColumns, null, 4)}
          </code>
        </pre>
        {makeTable()}
      </div>
    );
  }}
</ReactTable>

defaultSortMethod = (a, b, desc) => {
  // force null and undefined to the bottom
  a = a === null || a === undefined ? -Infinity : a;
  b = b === null || b === undefined ? -Infinity : b;
  // force any string values to lowercase
  a = typeof a === "string" ? a.toLowerCase() : a;
  b = typeof b === "string" ? b.toLowerCase() : b;
  // Return either 1 or -1 to indicate a sort priority
  if (a > b) {
    return 1;
  }
  if (a < b) {
    return -1;
  }
  // returning 0 or undefined will use any subsequent column sorting methods or the row index as a tiebreaker
  return 0;
};

// Change the global default
import { ReactTableDefaults } from 'react-table'
Object.assign(ReactTableDefaults, {
  TableComponent: component,
  TheadComponent: component,
  TbodyComponent: component,
  TrGroupComponent: component,
  TrComponent: component,
  ThComponent: component,
  TdComponent: component,
  TfootComponent: component,
  ExpanderComponent: component,
  AggregatedComponent: component,
  PivotValueComponent: component,
  PivotComponent: component,
  FilterComponent: component,
  PaginationComponent: component,
  PreviousComponent: undefined,
  NextComponent: undefined,
  LoadingComponent: component,
  NoDataComponent: component,
  ResizerComponent: component
})

// Or change per instance
<ReactTable
  TableComponent={Component},
  TheadComponent={Component},
  // etc...
  />