react-toolbox/components/table

Data Table

The Table component is an enhanced version of the standard HTML <table>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. You can compose your Table with similar components to those you use directly in HTML.

import React, { Component } from 'react';
import { Table, TableHead, TableRow, TableCell } from '../../components/table2';
import Tooltip from '../../components/tooltip';

const data = [
  {name: 'Cupcake', calories: 305, fat: 3.7, sodium: 413, calcium: '3%', iron: '8%'},
  {name: 'Donut', calories: 452, fat: 25.0, sodium: 326, calcium: '2%', iron: '22%'},
  {name: 'Eclair', calories: 262, fat: 16.0, sodium: 337, calcium: '6%', iron: '7%'},
  {name: 'Frozen yogurt', calories: 159, fat: 6.0, sodium: 87, calcium: '14%', iron: '1%'},
  {name: 'Gingerbread', calories: 356, fat: 16.0, sodium: 327, calcium: '7%', iron: '16%'},
  {name: 'Ice cream sandwich', calories: 237, fat: 9.0, sodium: 129, calcium: '8%', iron: '1%'},
  {name: 'Jelly bean', calories: 375, fat: 0.0, sodium: 50, calcium: '0%', iron: '0%'},
  {name: 'KitKat', calories: 518, fat: 26.0, sodium: 54, calcium: '12%', iron: '6%'}
];

const TooltipCell = Tooltip(TableCell);

const sortByCaloriesAsc = (a, b) => {
  if (a.calories < b.calories) return -1;
  if (a.calories > b.calories) return 1;
  return 0;
};

const sortByCaloriesDesc = (a, b) => {
  if (a.calories > b.calories) return -1;
  if (a.calories < b.calories) return 1;
  return 0;
};

class TableTest extends Component {
  state = {
    selected: ['Donut'],
    sorted: 'asc'
  };

  getSortedData = () => {
    const compare = this.state.sorted === 'asc' ? sortByCaloriesAsc : sortByCaloriesDesc;
    return data.sort(compare);
  }

  handleRowSelect = selected => {
    const sortedData = this.getSortedData();
    this.setState({ selected: selected.map(item => sortedData[item].name) });
  };

  handleSortClick = () => {
    const { sorted } = this.state;
    const nextSorting = sorted === 'asc' ? 'desc' : 'asc';
    this.setState({ sorted: nextSorting });
  };

  render () {
    const { sorted } = this.state;
    const sortedData = this.getSortedData();
    return (
      <Table multiSelectable onRowSelect={this.handleRowSelect} style={{ marginTop: 10 }}>
        <TableHead>
          <TooltipCell tooltip="The total amount of food energy in the given serving size">
            Dessert (100g serving)
          </TooltipCell>
          <TableCell onClick={this.handleSortClick} numeric sorted={sorted}>Calories</TableCell>
          <TableCell numeric>Fat (g)</TableCell>
          <TableCell numeric>Sodium (mg)</TableCell>
          <TableCell numeric>Calcium (%)</TableCell>
          <TableCell numeric>Iron (%)</TableCell>
        </TableHead>
        {sortedData.map((item, idx) => (
          <TableRow key={idx} selected={this.state.selected.indexOf(item.name) !== -1}>
            <TableCell>{item.name}</TableCell>
            <TableCell numeric>{item.calories}</TableCell>
            <TableCell numeric>{item.fat}</TableCell>
            <TableCell numeric>{item.sodium}</TableCell>
            <TableCell numeric>{item.calcium}</TableCell>
            <TableCell numeric>{item.iron}</TableCell>
          </TableRow>
        ))}
      </Table>
    );
  }
}

export default TableTest;

If you want to provide styles via context to this components, you should use the key RTTable.

Table

This is the Table main wrapper component. It parses children to generate an appropriated structure passing also some additional props so it's important to keep an eye on nesting.

Properties

Name	Type	Default	Description
children	Node		Pass TableHead and TableRow components as children always.
className	String	''	Sets a custom class to style the component.
multiSelectable	Boolean	false	If true, the header and each row will display a checkbox to allow the user to select multiple rows at the same time.
onRowSelect	Function		Will be called when the row selection changes. It passes an array of selected indexes as first parameter so you can figure out changes in your local state.
selectable	Boolean	true	If true, each row will display a checkbox to allow the user to select that one row.

TableHead

Header element that should be place as a direct descendant of Table and whose children should be TableCells that will be rendered as header cells. It receives properties from the parent to decide whether a select column should be placed/disabled or not.

Properties

Name	Type	Default	Description
children	Node		Pass TableCell components always either decorated or not.
className	String	''	Sets a custom class to style the header row.
displaySelect	Boolean	true	If true, a checkbox will be displayed to select every row. In case the table is not multi-selectable, it will be disabled though.

TableRow

An element that represents a row in the Table. It should be place as a direct descendant of Table and it should has TableCells children. It receives extra properties from Table to decide if checkboxes should be placed as a first column.

Properties

Name	Type	Default	Description
children	Node		Pass TableCell components always either decorated or not.
className	String	''	Sets a custom class to style the row.
selected	Boolean	false	If true, the row will be considered as selected so the row will display a selected style with the selection control activated. This property is used by Table to figure out the selection when you interact with the Table.

TableCell

Displays a cell of the Table. It renders a tag td or th depending on if it's set as direct children of TableRow or TableHead.

Name	Type	Default	Description
children	Any		Any content you want to render inside the cell.
className	String	''	Sets a custom class to style that particular cell.
numeric	Boolean	false	If true the cell is considered as numeric and the content will be displayed aligned to right.
onClick	Function		Called when the cell is clicked with the click event, column number and row number.
sorted	Bool	asc or desc	Optional. If you provide a value the cell will show an arrow pointing down or up depending on the value to indicate it is a sorted element. Useful only for columns.

Theme

Name	Description
table	Used the root element of the component (table).
head	Used for the thead element.
row	Added to each row in the table except for the header.
selected	Modifier for rows that are selected.
headCell	Added to each cell displayed in the head.
rowCell	Added to each cell displayed in the table body.
sorted	Modifier for cells that are sorted asc or desc.
numeric	Modifier for cells that are numeric.
checkboxCell	Modifier for cells that include a select checkbox.
sortIcon	Used for the sort icon included in sorted cells.
asc	Modifier for the icon in case the order is ascendent.