Table

Display data that's easy on the eyes with our Table. Rows and columns have never looked so good

Example

Name	Role	Age
Jane Doe	Software Engineer	32
John Smith	Product Manager	45
Sarah Williams	Data Scientist	29
Michael Brown	UI/UX Designer	38

1  import { Table, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox justify='center'>
4    <Table>
5      <Table.Header>
6        <Table.Row>
7          <Table.Th>Name</Table.Th>
8          <Table.Th>Role</Table.Th>
9          <Table.Th>Age</Table.Th>
10        </Table.Row>
11      </Table.Header>
12
13      <Table.Body>
14        <Table.Row>
15          <Table.Cell>Jane Doe</Table.Cell>
16          <Table.Cell>Software Engineer</Table.Cell>
17          <Table.Cell>32</Table.Cell>
18        </Table.Row>
19
20        <Table.Row>
21          <Table.Cell>John Smith</Table.Cell>
22          <Table.Cell>Product Manager</Table.Cell>
23          <Table.Cell>45</Table.Cell>
24        </Table.Row>
25
26        <Table.Row>
27          <Table.Cell>Sarah Williams</Table.Cell>
28          <Table.Cell>Data Scientist</Table.Cell>
29          <Table.Cell>29</Table.Cell>
30        </Table.Row>
31
32        <Table.Row>
33          <Table.Cell>Michael Brown</Table.Cell>
34          <Table.Cell>UI/UX Designer</Table.Cell>
35          <Table.Cell>38</Table.Cell>
36        </Table.Row>
37      </Table.Body>
38    </Table>
39  </FlexBox>
40

API Reference

Component	Description
Table	This is your top-level component for representing structured data in a tabular format. It facilitates the organization of data rows and columns, offering an intuitive layout for users to understand your data.
Table.Header	This subcomponent represents the header of your table. It typically contains Table.HeaderCell components that denote the titles of your table columns.
Table.HeaderCell	This is an individual header cell in your table. It is used within the Table.Header component and typically contains text denoting what kind of information the corresponding column in the table holds.
Table.Body	This subcomponent contains the main content of your table. It typically houses multiple Table.Row components which encapsulate your data.
Table.Footer	The footer of your table. It's an optional component that can be used to display extra information or summaries of the table data.
Table.Row	A Table.Row is a single row in your table, containing individual Table.Cell components. Each Table.Cell in a row corresponds to a Table.HeaderCell in the table's header.
Table.Cell	This is an individual cell within a Table.Row. It is used to display the data in your table. Each cell corresponds to a specific data point in your dataset.

Component Properties

Table

Prop	Type	Default	Explanation
`size`	`string`	md	Sets the overall padding and font size of the table. sm creates a small table with reduced padding and font size, md sets medium padding and font size, and lg sets large padding and font size.
`striped`	`boolean`	false	If set to true, it alternates the background color of table rows for easy reading.
`hover`	`boolean`	true	When set to true, it changes the background color of the table rows on mouse hover, providing a visual indicator of the hovered row.
`compact`	`boolean`	true	This prop, when set to true, reduces the space between the table cells, giving the table a more compact appearance.

Table.HeaderCell

Prop	Type	Default	Explanation
`align`	`string`	left	This property adjusts the alignment of the text within the cell or header cell. If set to left, the text aligns to the left side of the cell. If set to center, the text is centered within the cell. If set to right, the text aligns to the right side of the cell. This provides FlexBoxibility in formatting your table for optimal readability and aesthetics.

Table.Cell

Prop	Type	Default	Explanation
`align`	`string`	left	This property adjusts the alignment of the text within the cell or header cell. If set to left, the text aligns to the left side of the cell. If set to center, the text is centered within the cell. If set to right, the text aligns to the right side of the cell. This provides FlexBoxibility in formatting your table for optimal readability and aesthetics.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius