7.8 KiB
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. |