Menu


Components

Table

Storybook

The Table component offers a flexible and easy-to-use solution for displaying and organizing data in table form, making it easy to present and manipulate information.



Imports
1import { Table } from 'dd360-ds'

Usage

Use the Table component as shown below:

Header 1Header 2Header 3
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3

The code snippet below shows how to use the Table component:

1import { Table } from 'dd360-ds
2  
3<Table className="w-96">
4    <Table.Header>
5      <Table.HeaderRow>
6        <Table.HeaderCell>Header 1</Table.HeaderCell>
7        <Table.HeaderCell>Header 2</Table.HeaderCell>
8        <Table.HeaderCell>Header 3</Table.HeaderCell>
9      </Table.HeaderRow>
10    </Table.Header>
11    <Table.Body>
12      <Table.HeaderRow>
13        <Table.Cell>Row 1</Table.Cell>
14        <Table.Cell>Row 1</Table.Cell>
15        <Table.Cell>Row 1</Table.Cell>
16      </Table.HeaderRow>
17      <Table.HeaderRow>
18        <Table.Cell>Row 2</Table.Cell>
19        <Table.Cell>Row 2</Table.Cell>
20        <Table.Cell>Row 2</Table.Cell>
21      </Table.HeaderRow>
22      <Table.HeaderRow>
23        <Table.Cell>Row 3</Table.Cell>
24        <Table.Cell>Row 3</Table.Cell>
25        <Table.Cell>Row 3</Table.Cell>
26      </Table.HeaderRow>
27    </Table.Body>
28</Table>
29

StickyTop

With the prop stickyTop you can fix the header with a sticky position at the top

Header 1Header 2Header 3
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3
1import { Table } from 'dd360-ds
2  
3<Table className="w-96">
4    <Table.Header>
5      <Table.HeaderRow>
6        <Table.HeaderCell stickyTop="0px">Header 1</Table.HeaderCell>
7        <Table.HeaderCell stickyTop="0px">Header 2</Table.HeaderCell>
8        <Table.HeaderCell stickyTop="0px">Header 3</Table.HeaderCell>
9      </Table.HeaderRow>
10    </Table.Header>
11    <Table.Body>
12      <Table.Row>
13        <Table.Cell>Row 1</Table.Cell>
14        <Table.Cell>Row 1</Table.Cell>
15        <Table.Cell>Row 1</Table.Cell>
16      </Table.Row>
17      <Table.Row>
18        <Table.Cell>Row 2</Table.Cell>
19        <Table.Cell>Row 2</Table.Cell>
20        <Table.Cell>Row 2</Table.Cell>
21      </Table.Row>
22      <Table.Row>
23        <Table.Cell>Row 3</Table.Cell>
24        <Table.Cell>Row 3</Table.Cell>
25        <Table.Cell>Row 3</Table.Cell>
26      </Table.Row>
27    </Table.Body>
28</Table>
29

StickyLeft

With the prop stickyLeft you can fix the header with a sticky position at the left

Header 1Header 2Header 3
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3
1import { Table } from 'dd360-ds
2  
3 <Table className="w-52">
4    <Table.Header>
5      <Table.HeaderRow>
6        <Table.HeaderCell stickyLeft="0px">Header 1</Table.HeaderCell>
7        <Table.HeaderCell>Header 2</Table.HeaderCell>
8        <Table.HeaderCell>Header 3</Table.HeaderCell>
9      </Table.HeaderRow>
10    </Table.Header>
11    <Table.Body>
12      <Table.Row>
13        <Table.Cell stickyLeft="0px">Row 1</Table.Cell>
14        <Table.Cell>Row 1</Table.Cell>
15        <Table.Cell>Row 1</Table.Cell>
16      </Table.Row>
17      <Table.Row>
18        <Table.Cell stickyLeft="0px">Row 2</Table.Cell>
19        <Table.Cell>Row 2</Table.Cell>
20        <Table.Cell>Row 2</Table.Cell>
21      </Table.Row>
22      <Table.Row>
23        <Table.Cell stickyLeft="0px">Row 3</Table.Cell>
24        <Table.Cell>Row 3</Table.Cell>
25        <Table.Cell>Row 3</Table.Cell>
26      </Table.Row>
27    </Table.Body>
28</Table>
29

ColSpan

With the prop colSpan you can set the number of columns that the cell will occupy

Header 1
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3
1import { Table } from 'dd360-ds
2  
3  <Table className="w-52">
4    <Table.Header>
5      <Table.HeaderRow>
6        <Table.HeaderCell colSpan={3}>Header 1</Table.HeaderCell>
7      </Table.HeaderRow>
8    </Table.Header>
9    <Table.Body>
10      <Table.Row>
11        <Table.Cell>Row 1</Table.Cell>
12        <Table.Cell>Row 1</Table.Cell>
13        <Table.Cell>Row 1</Table.Cell>
14      </Table.Row>
15      <Table.Row>
16        <Table.Cell>Row 2</Table.Cell>
17        <Table.Cell>Row 2</Table.Cell>
18        <Table.Cell>Row 2</Table.Cell>
19      </Table.Row>
20      <Table.Row>
21        <Table.Cell>Row 3</Table.Cell>
22        <Table.Cell>Row 3</Table.Cell>
23        <Table.Cell>Row 3</Table.Cell>
24      </Table.Row>
25    </Table.Body>
26</Table>
27

RowSpan

With the prop rowSpan you can set the number of rows that the cell will occupy

Header 1Header 2Header 3
Row PrincipalRow 1Row 1
Row 3Row 3
1import { Table } from 'dd360-ds
2  
3 <Table className="w-96">
4    <Table.Header>
5    <Table.HeaderCell >Header 1</Table.HeaderCell>
6      <Table.HeaderRow>
7        <Table.HeaderCell>Header 2</Table.HeaderCell>
8        <Table.HeaderCell>Header 3</Table.HeaderCell>
9      </Table.HeaderRow>
10    </Table.Header>
11    <Table.Body>
12      <Table.Row>
13        <Table.Cell rowSpan={2}>Row Principal</Table.Cell>
14         <Table.Cell>Row 1</Table.Cell>
15          <Table.Cell>Row 1</Table.Cell>
16    </Table.Row>
17      <Table.Row>
18        <Table.Cell>Row 3</Table.Cell>
19        <Table.Cell>Row 3</Table.Cell>
20      </Table.Row>
21    </Table.Body>
22</Table>
23

Accordion

You can use Table.Accordion for dropdown rows

Header 1Header 2Header 3
Row 1Row 1Row 1
Row 2
Row 3Row 3Row 3
1import { Table } from 'dd360-ds
2  
3  <Table className="w-96">
4        <Table.Header>
5          <Table.HeaderRow>
6            <Table.HeaderCell>Header 1</Table.HeaderCell>
7            <Table.HeaderCell>Header 2</Table.HeaderCell>
8            <Table.HeaderCell>Header 3</Table.HeaderCell>
9          </Table.HeaderRow>
10        </Table.Header>
11        <Table.Body>
12          <Table.Row>
13            <Table.Cell>Row 1</Table.Cell>
14            <Table.Cell>Row 1</Table.Cell>
15            <Table.Cell>Row 1</Table.Cell>
16          </Table.Row>
17            <Table.Accordion>
18             <Table.Row>
19            <Table.Cell>Row 2</Table.Cell>
20            <Table.Cell></Table.Cell>
21            <Table.Cell></Table.Cell>
22          </Table.Row>
23          <Table.Row>
24            <Table.Cell>Sub Row 2</Table.Cell>
25            <Table.Cell>Sub Row 2</Table.Cell>
26            <Table.Cell>Sub Row 2</Table.Cell>
27          </Table.Row>
28            </Table.Accordion>
29          <Table.Row>
30            <Table.Cell>Row 3</Table.Cell>
31            <Table.Cell>Row 3</Table.Cell>
32            <Table.Cell>Row 3</Table.Cell>
33          </Table.Row>
34        </Table.Body>
35      </Table>
36


API Reference

Header

The Header component is used to render the header row of the table, which usually contains the column titles.

NameTypesDefault
"children"
React.ReactNode
-
"..."
React.HTMLAttributes<HTMLTableSectionElement>
-

HeaderRow

The HeaderRow component is used to render a custom header row in the table, allowing more flexibility in the structure and appearance of the table header.

NameTypesDefault
"variant"
primary
secondary
tertiary
primary
"children"
React.ReactNode
-
"..."
React.HTMLAttributes<HTMLTableRowElement>
-

HeaderCell

The "HeaderCell" component is used to render a header cell within the header row. It is used to display information specific to each column in the table header, such as the title or any other relevant content.

NameTypesDefault
"stickyLeft"
string
-
"stickyTop"
string
-
"stickyRight"
string
-
"stickyBottom"
string
-
"children"
React.ReactNode
-
"..."
React.HTMLAttributes<HTMLTableHeaderCellElement>
-

Body

The "Body" component is used to render the body of the table, which contains the rows of data. It is responsible for displaying the data in a structured way in the corresponding cells, allowing the visualization and manipulation of the information in the table.

NameTypesDefault
"children"
React.ReactNode
-
"..."
React.HTMLAttributes<HTMLTableSectionElement>
-

Row

The "Row" component is used to render a row of data within the body of the table. Each instance of this component represents an individual row in the table and contains the corresponding cells that display the specific data for that row.

NameTypesDefault
"variant"
header
result
default
default
"children"
React.ReactNode
-
"..."
React.HTMLAttributes<HTMLTableRowElement>
-

Cell

The "Cell" component is used to render a data cell within a row. Each instance of this component represents an individual cell in the table and displays the specific content of that cell, such as a numeric value, text, or other data type.

NameTypesDefault
"disabled"
boolean
false
"error"
boolean
false
"inputProps"
{ controllers?: boolean }
-
"stickyLeft"
string
-
"stickyTop"
string
-
"stickyRight"
string
-
"stickyBottom"
string
-
"children"
React.ReactNode
-
"..."
React.ThHTMLAttributes<HTMLTableCellElement>
-

Accordion

The "Accordion" component is an interactive element that allows you to expand and collapse sections of content within the table, providing a way to organize and display information in a more structured and compact way.

NameTypesDefault
"iconPosition"
number
0
"children"
React.ReactNode[]
-
SkeletonTimeline