Table

Used to display data in a tabular format.

Demo

React

SizeExtra SmallSmallMediumLargeExtra Large

Dense

Table border

Row border

Col border

Striped

Scroll area

Shopping Cart

#	Product	Quantity	Price	Total
1	Product 1	1	100	100
2	Product 2	2	200	400
3	Product 3	3	300	900
Total		6		1500

Vue

SizeExtra SmallSmallMediumLargeExtra Large

Dense

Table border

Row border

Col border

Striped

Scroll area

Shopping Cart

#	Product	Quantity	Price	Total
1	Product 1	1	100	100
2	Product 2	2	200	400
3	Product 3	3	300	900
Total		6		1500

Usage

React

import { Table } from '@fintech-sandpit/ui/react';

return (
  <div className="max-w-[50%] max-h-[200px] overflow-auto whitespace-nowrap pr-1 pb-1">
    <Table.Root
      showRowStripe
      showColumnBorder
    >
      <Table.Caption>
        Shopping Cart
      </Table.Caption>

      <Table.Header sticky>
        <Table.Row>
          <Table.ColumnHeader sticky="5rem">#</Table.ColumnHeader>

          <Table.ColumnHeader>Product</Table.ColumnHeader>

          <Table.ColumnHeader>Quantity</Table.ColumnHeader>

          <Table.ColumnHeader>Price</Table.ColumnHeader>

          <Table.ColumnHeader>Total</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row>
          <Table.Cell sticky="5rem">1</Table.Cell>

          <Table.Cell>Product 1</Table.Cell>

          <Table.Cell>1</Table.Cell>

          <Table.Cell>100</Table.Cell>

          <Table.Cell>100</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell sticky="5rem">2</Table.Cell>

          <Table.Cell>Product 2</Table.Cell>

          <Table.Cell>2</Table.Cell>

          <Table.Cell>200</Table.Cell>

          <Table.Cell>400</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell sticky="5rem">3</Table.Cell>

          <Table.Cell>Product 3</Table.Cell>

          <Table.Cell>3</Table.Cell>

          <Table.Cell>300</Table.Cell>

          <Table.Cell>900</Table.Cell>
        </Table.Row>
      </Table.Body>

      <Table.Footer>
        <Table.Row>
          <Table.Cell sticky="5rem">Total</Table.Cell>

          <Table.Cell />

          <Table.Cell>6</Table.Cell>

          <Table.Cell />

          <Table.Cell>1500</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  </div>
);

Vue

<script setup lang="ts">
import { Table } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <div class="max-w-[50%] max-h-[200px] overflow-auto whitespace-nowrap pr-1 pb-1">
    <Table.Root
      show-row-stripe
      show-column-border
    >
      <Table.Caption>
        Shopping Cart
      </Table.Caption>

      <Table.Header sticky>
        <Table.Row>
          <Table.ColumnHeader sticky="5rem">
            #
          </Table.ColumnHeader>

          <Table.ColumnHeader>Product</Table.ColumnHeader>

          <Table.ColumnHeader>Quantity</Table.ColumnHeader>

          <Table.ColumnHeader>Price</Table.ColumnHeader>

          <Table.ColumnHeader>Total</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row>
          <Table.Cell sticky="5rem">
            1
          </Table.Cell>

          <Table.Cell>Product 1</Table.Cell>

          <Table.Cell>1</Table.Cell>

          <Table.Cell>100</Table.Cell>

          <Table.Cell>100</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell sticky="5rem">
            2
          </Table.Cell>

          <Table.Cell>Product 2</Table.Cell>

          <Table.Cell>2</Table.Cell>

          <Table.Cell>200</Table.Cell>

          <Table.Cell>400</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell sticky="5rem">
            3
          </Table.Cell>

          <Table.Cell>Product 3</Table.Cell>

          <Table.Cell>3</Table.Cell>

          <Table.Cell>300</Table.Cell>

          <Table.Cell>900</Table.Cell>
        </Table.Row>
      </Table.Body>

      <Table.Footer>
        <Table.Row>
          <Table.Cell sticky="5rem">
            Total
          </Table.Cell>

          <Table.Cell />

          <Table.Cell>6</Table.Cell>

          <Table.Cell />

          <Table.Cell>1500</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  </div>
</template>

Props

Table Root Props

React

Name	Type	Required	Default	Description
size	Size		md	The size of the table
dense	boolean		false	Whether to use a dense table
showBorder	boolean		false	Whether to show the table border
showRowStripe	boolean		false	Whether to show the row stripe
showRowBorder	boolean		false	Whether to show the row border
showColumnBorder	boolean		false	Whether to show the column border

Vue

Name	Type	Required	Default	Description
size	Size		md	The size of the table
dense	boolean		false	Whether to use a dense table
show-border	boolean		false	Whether to show the table border
show-row-stripe	boolean		false	Whether to show the row stripe
show-row-border	boolean		false	Whether to show the row border
show-column-border	boolean		false	Whether to show the column border

Table Header Props

Name	Type	Required	Default	Description
sticky	boolean		false	Whether to make the header sticky

Table Column Header Props

React

Name	Type	Required	Default	Description
sticky	CssUnit | boolean		—	Whether to make the column header sticky 1
colSpan	number		—	The number of columns the column header should span
rowSpan	number		—	The number of rows the column header should span

Vue

Name	Type	Required	Default	Description
sticky	CssUnit | boolean		—	Whether to make the column header sticky 1
col-span	number		—	The number of columns the column header should span
row-span	number		—	The number of rows the column header should span

1. Set width CSS property to make the column header sticky.

Table Cell Props

React

Name	Type	Required	Default	Description
sticky	CssUnit | boolean		—	Whether to make the cell sticky 1
colSpan	number		—	The number of columns the cell should span
rowSpan	number		—	The number of rows the cell should span

Vue

Name	Type	Required	Default	Description
sticky	CssUnit | boolean		—	Whether to make the cell sticky 1
col-span	number		—	The number of columns the cell should span
row-span	number		—	The number of rows the cell should span

1. Set width CSS property to make the cell sticky.

Types

type CssUnit = `${number}${'em' | 'px' | 'rem' | 'vh' | 'vw' | '%'}`
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'