export default {
  // default classNames
  DataTable: {
    // root
  },
  thead: {},
  tbody: {},
  tr: {},
  trEven: {},
  trOdd: {},
  trh: {},
  th: {},
  td: {},
  tdEmpty: {},
  // your own classNames
  thumb: {},
};

import React from 'react';
import DataTable from 'react-immutable-jss-data-table';
import sheet from './sheet.js';
// your jss injectSheet instance
import injectSheet from 'lib/sheet';
import tableColumns from './columns.jsx'

const columns = tableColumns.select('title', 'link', 'user', 'clickMe');

class MyPage extends React.PureComponent {
  render() {
    const { classes, list } = this.props;
    return (
      <div
        className={classes.container}
      >
        <DataTable
          classes={classes}
          columns={columns}
          items={list}
        />
      </div>
    );
  }
}

export default injectSheet(sheet)(MyPage);

import React from 'react';
import I from 'immutable';
import { columnsSelector } from 'react-immutable-jss-data-table';

export const columns = {
  // use rowIndex:
  cell0: {
    getValue: ({ rowIndex }) => `# ${rowIndex}`,
  },
  // add extra class, it will be searched in classes prop or cellClasses prop or used as is
  cell1: {
    className: 'my-own-class-name',
  },
  cell2: {
    // you can cpecify how to extract data from entries (rowData.getIn(fieldPath))
    fieldPath: ['article', 'title'],
    // then you can change the value
    getValue: ({ value }) => `Title: ${value}`,
  },
  cell3: {
    // how to extract data from rowData,
    fieldPath: ['article', 'title'],
    // then you can change the value
    getValue: ({ value, rowData }) => `Title: ${value}`,
    // you can render cell using your own component
    render: ({ value, rowData }) => <li children={'changed value: ' + value} />,
    // React component also can be used
    render: CustomCellComponent,
  },
  // if you whant to show column titles in table, please use 'title' prop
  cell4: {
    fieldPath: ['someField'],
    // column title (th)
    title: 'colum title',
    // you can change default title, f.e. add items amout
    getValueTh: ({ value, items }) => `${value} (${itmes.size})`,
    // render th using your own component
    renderTh: hoToRenderTh,
  },
  // you can change cell inner content markup using getValue:
  link: {
    fieldPath: ['article', 'url'],
    getValue: ({ value }) => <Link to={value} />,
  },
  // use DataTable props (<DataTable user={user}/>)
  user: {
    fieldPath: ['userId'],
    getValue: ({ classes, rowData, value, rowIndex, user }) =>
      <div
        className={classes.thumb}
        children={users.getFullNameById(value)}
      />,
  },
  // change cell markup fully
  clickMe: {
    render: ({ className, classes, rowData, value, rowIndex, props }) =>
      <div
        className={className}
        children={value}
        onClick={() => props.toggleEditRow(rowIndex)}
      />
  },
  // see definition bellow
  select: null,
};
columns.select = columnsSelector(columns);

export default columns;

import DataTable, { Row } from 'react-immutable-jss-data-table';
const getRowRenderer = (props) => {
  const { rowData, rowIndex, ...allDataTableProps } = props;
  const Renderer = rowIndex === customRowIndex ? MyCustomRow : Row;
  return <Renderer {...props} />
}
<DataTable
  // ...
  Row={getRowRenderer}
/>

import DataTable, { RowEmpty } from 'react-immutable-jss-data-table';

const CustomRowEmpty = (props) =>
  rowIndex == 1 ? <MyEmptyRowComponent /> : <RowEmpty {...props} />;

<DataTable
  // ...
  RowEmpty={CustomRowEmpty}
/>

import DataTable, { Th, Cell } from 'react-immutable-jss-data-table';

<DataTable
  // ...
  Th={Th}
  Cell={Cell}
/>

import DataTable from 'react-immutable-jss-data-table';

const THead = ({ children, classes, ...otherDataTableProps }) =>
  <div className={classes.thead} children={children} />;


<DataTable
  // ...
  THead={THead}
/>

import DataTable from 'react-immutable-jss-data-table';

const TBody = ({ children, classes, ...otherDataTableProps }) =>
  <div className={classes.tbody} children={children} />;


<DataTable
  // ...
  TBody={TBody}
/>

import DataTable, {
  // default getters
  renderTh,
  getValueTh,
  getValue,
  renderCell,
  // components
  Th,
  TBody,
  THead,
  Row,
  RowEmpty,
  Cell,
  DataTable,
  // sheet example
  sheet,
  // helpers
  getCellClassNames,
  getThClassNames,
  getRowClassNames,
  getColumnDef,
  columnsSelector,
} from 'react-immutable-jss-data-table';

let value = rowData.getIn(fieldPath);
value = getValue ? getValue({ value, columnDef, rowData, rowIndex, ...props });

// file ./columns.js
import { columnsSelector } from 'react-immutable-jss-data-table';
const COLUMNS_DEF = { title, link, user, clickMe, select: null };
COLUMNS_DEF.select = columnsSelector(COLUMNS_DEF);
export default COLUMNS_DEF;

// file with table
import DataTable from 'react-immutable-jss-data-table';
import tableColumns from './columns.js';
const columns = tableColumns.select('title', 'link', 'user', 'clickMe');

// in your component with table
<DataTable
  columns={columns}
  items={items}
  ...
/>

// file ./columns.js
import { getColumnDef } from 'react-immutable-jss-data-table';
export default const COLUMNS_DEF = {
  title, link, user, clickMe,
  select: (...keys) => keys.map(col => getColumnDef(COLUMNS_DEF, col)),
};

// file with table
import DataTable from 'react-immutable-jss-data-table';
import tableColumns from './columns.js';
const columns = tableColumns.select('title', 'link', 'user', 'clickMe');

// in your component with table
<DataTable
  columns={columns}
  items={items}
  ...
/>