Table

Organizes information into rows and columns for easy readability. It accommodates various data types, including text, numbers, codes, call-to-action and links, enabling efficient presentation and comparison.

Audit log
Timestamp	Activity	Action Taken
2021-09-01 12:00:00	Login attempt successful	Ali
2021-09-01 12:01:32	Page visited: /company-a/inventory	Ali
2021-09-01 12:02:03	New inventory item added: MacBook Pro	Ali
2021-09-01 12:03:45	Inventory: MacBook Pro stock count updated: 100 units	Ali

Source Storybook

Usage

Import

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@govtechmy/myds-react/table";

Anatomy

export default () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead />
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell />
      </TableRow>
    </TableBody>
    <TableCaption />
  </Table>
);

Examples

Basic Table

You can use the Table component to create a basic table with headers, rows, and cells. Conventional table, th, td applies, so you can define colSpan, rowSpan, scope and other native attributes.

Audit log
Timestamp	Activity	Action Taken
2021-09-01 12:00:00	Login attempt successful	Ali
2021-09-01 12:01:32	Page visited: /company-a/inventory	Ali
2021-09-01 12:02:03	New inventory item added: MacBook Pro	Ali
2021-09-01 12:03:45	Inventory: MacBook Pro stock count updated: 100 units	Ali

Row Span and Col Span

You can use the rowSpan and colSpan attributes to merge cells in a row or column.

Tax Assessment Year 2023
Category	Chargeable Income	Calculation (RM)	Rate	Tax
A	0 - 5,000	On the First 5,000	0	RM 0
B	5,000 - 20,000	On the First 5,000	1%	RM 0
B	5,000 - 20,000	Next 15,000	1%	RM 150
C	20,001 - 35,000	On the First 20,000	3%	RM 150
C	20,001 - 35,000	Next 15,000	3%	RM 450

With Footer

You can add a footer to the table using the TableFooter component.

Tax Assessment Year 2023
Category	Chargeable Income	Calculation (RM)	Rate	Tax
A	0 - 5,000	On the First 5,000	0	RM 0
B	5,000 - 20,000	On the First 5,000	1%	RM 0
B	5,000 - 20,000	Next 15,000	1%	RM 150
C	20,001 - 35,000	On the First 20,000	3%	RM 150
C	20,001 - 35,000	Next 15,000	3%	RM 450
Total Tax				RM 600

Skeleton Loading

You can use the TableSkeleton component to create a skeleton loading state for the table.

Audit log
Timestamp	Activity	Action Taken

Empty Table

Use the TableEmpty component to show the empty state.

Audit log
Timestamp	Activity	Action Taken
No data available

Props

TableHead

Prop	Type	Default
`rowSpan`	`boolean`	`false`
`colSpan`	`boolean`	`false`
`scope`	`col \| row \| colgroup \| rowgroup`	-

TableCell

Prop	Type	Default
`rowSpan`	`boolean`	`false`
`colSpan`	`boolean`	`false`
`scope`	`col \| row \| colgroup \| rowgroup`	-

MYDS