Tables

Tables are used to organize and display information.

organism

Sep 27, 2021 · 1 min de lecture


#Variants

#Default

The default table has a base style for the title, header and table elements rows.

#Selection

Table can have the function to select individual row and allow the user to apply an action. Actions appears when a a row is selected.

#Expansion

Expandable table are used to present elements by collasing them and preserve space. It allows users to expanded the information needed to reveal more information.

#Sizes

The table is available in four different row sizes: x-small, small, medium and large.

#Table

Name
ID
Favorite Color
Jim00001Blue
Barb0021001Red
Jim00001Blue
Barb0021001Red
import {
Table,
TableBody,
TableCell,
TableCellHeader,
TableHeader,
TableRow,
useTreatTheme,
} from '@newrade/core-react-ui';
import React from 'react';
type Props = {};
export const Tables: React.FC<Props> = (props) => {
const { theme, cssTheme } = useTreatTheme();
return (
<>
<Table>
<TableHeader>
<TableRow>
<TableCellHeader>Name</TableCellHeader>
<TableCellHeader>ID</TableCellHeader>
<TableCellHeader>Favorite Color</TableCellHeader>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Jim</TableCell>
<TableCell>00001</TableCell>
<TableCell>Blue</TableCell>
</TableRow>
<TableRow>
<TableCell>Barb</TableCell>
<TableCell>0021001</TableCell>
<TableCell>Red</TableCell>
</TableRow>
<TableRow>
<TableCell>Jim</TableCell>
<TableCell>00001</TableCell>
<TableCell>Blue</TableCell>
</TableRow>
<TableRow>
<TableCell>Barb</TableCell>
<TableCell>0021001</TableCell>
<TableCell>Red</TableCell>
</TableRow>
</TableBody>
</Table>
</>
);
};