159 lines
7.8 KiB
Markdown
159 lines
7.8 KiB
Markdown
# Data Table
|
|
|
|
The [Table component](https://material.google.com/components/data-tables.html) 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.
|
|
|
|
<!-- example -->
|
|
|
|
```jsx
|
|
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.
|