React Design System: component Table

Table

Tables allow to arrange and organize data into rows and columns.

No.	Customer	Company	Order Date	Status	Address
2134	Daniel Webster	Y-corporation	07/14/1984	OK	Ulrike-Günther-Platz 145, 18410 Guben
1259	Derek Barnhouse	Goodsilron	07/03/1990	LOSS	Brunhilde-Hecht-Allee 5/9, 90409 Sangerhausen
1042	Terresa Juarez	Donquadtech	08/13/1991	OK	Moritzweg 0, 77139 Bad Langensalza
1496	Florence Boyle	Conecom	09/15/1986	OK	Meyerring 3/0, 18049 Steinfurt
1122	Will Hernandez	Openlane	01/25/1996	OK	Sigurd-Kühn-Allee 8/6, 76106 Weißenfels
1238	Daniel Webster	Y-corporation	07/14/1984	LOSS	Ulrike-Günther-Platz 145, 18410 Guben
1258	Derek Barnhouse	Goodsilron	07/03/1990	STOPPED	Brunhilde-Hecht-Allee 5/9, 90409 Sangerhausen
1041	Terresa Juarez	Donquadtech	08/13/1991	WARN	Moritzweg 0, 77139 Bad Langensalza

Overview

API

Code

Component 'Table'

First, you need to import a component to your code (сheck component path is right):

import Table from "../../core/Table/Table";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string

This prop set the shape of the component. Possible states: def | dense .

view

string

This prop set the view of the component. Possible states: filled | flat | smooth | raised .

color

string

className

string

A space-delimited list of class names to pass along to a child element.

name

array

Array of Head names. See an example in the demo folder.

data

array

Array of data. See an example in the demo folder.

position

string

Set the text-align on the table cell content. Possible states: left | right | center

pages

boolean

Use or not pagination.

checkboxes

boolean

Use or not checkboxes.

labelRowsPerPage

string

Customize the rows per page label.

rowsPerPageOptions

array

Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.

defRows

number

A Default value of the rows per page select field.