Table

Used to display data in a tabular format.

Demo

React

Vue

Example

React

import {
  useMemo,
  useState,
} from 'react';
// Import component
import {
  Table,
  type Sort,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/table.css';

const data = [
  { id: '1', product: 'Product 1', quantity: '1', price: '100.00', total: '100.00' },
  { id: '2', product: 'Product 2', quantity: '2', price: '200.00', total: '400.00' },
  { id: '3', product: 'Product 3', quantity: '3', price: '300.00', total: '900.00' },
];

const totals = useMemo(() => ({
  quantity: data.reduce((acc, item) => acc + item.quantity, 0),
  price: data.reduce((acc, item) => acc + item.price, 0),
}), [data]);

const [sort, setSort] = useState<Sort<keyof typeof data> | undefined>();

const sortedData = useMemo(() => {
  if (!sort) {
    return data;
  }

  const {
    column,
    direction,
  } = sort;

  return [...data].sort((a, b) => {
    const aVal = a[column] ?? null;
    const bVal = b[column] ?? null;

    if (aVal === null && bVal === null) return 0;
    if (aVal === null) return 1;
    if (bVal === null) return -1;

    const result = aVal.localeCompare(bVal, undefined, {
      numeric: true,
      sensitivity: 'base',
    });

    return direction === 'asc' ? result : -result;
  });
}, [
  sort,
  tableRows,
]);

return (
  <Table.Root
    showRowStripe
    showColumnBorder
  >
    <Table.Caption>
      Shopping Cart
    </Table.Caption>

    <Table.Header sticky>
      <Table.Row>
        <Table.ColumnHeader sticky="5rem">
          <Table.ColumnHeaderSorter
            column="id"
            sort={sort}
            onSort={setSort}
          >
            #
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="product"
            sort={sort}
            onSort={setSort}
          >
            Product
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="quantity"
            sort={sort}
            onSort={setSort}
          >
            Quantity
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="price"
            sort={sort}
            onSort={setSort}
          >
            Price
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="total"
            sort={sort}
            onSort={setSort}
          >
            Total
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      {sortedData.map(row => (
        <Table.Row key={row.id}>
          <Table.Cell sticky="5rem">
            {row.id}
          </Table.Cell>

          <Table.Cell>
            {row.product}
          </Table.Cell>

          <Table.Cell>
            {row.quantity}
          </Table.Cell>

          <Table.Cell>
            {row.price}
          </Table.Cell>

          <Table.Cell>
            {row.total}
          </Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>

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

        <Table.Cell />

        <Table.Cell>
          {totals.quantity}
        </Table.Cell>

        <Table.Cell />

        <Table.Cell>
          {totals.price.toFixed(2)}
        </Table.Cell>
      </Table.Row>
    </Table.Footer>
  </Table.Root>
);

Vue

<script setup lang="ts">
import {
  computed,
  ref,
} from 'vue';
// Import component
import {
  Table,
  type Sort,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/table.css';

const data = [
  { id: '1', product: 'Product 1', quantity: '1', price: '100.00', total: '100.00' },
  { id: '2', product: 'Product 2', quantity: '2', price: '200.00', total: '400.00' },
  { id: '3', product: 'Product 3', quantity: '3', price: '300.00', total: '900.00' },
];

const sort = ref<Sort<keyof typeof data> | undefined>();

const sortedData = computed(() => {
  if (!sort.value) {
    return data;
  }

  const {
    column,
    direction,
  } = sort.value;

  return [...data].sort((a, b) => {
    const aVal = a[column].toString() ?? null;
    const bVal = b[column].toString() ?? null;

    if (aVal === null && bVal === null) return 0;
    if (aVal === null) return 1;
    if (bVal === null) return -1;

    const result = aVal.localeCompare(bVal, undefined, {
      numeric: true,
      sensitivity: 'base',
    });

    return direction === 'asc' ? result : -result;
  });
});

const setSort = ({ column, direction }: Sort<keyof typeof data>) => {
  sort.value = {
    column,
    direction,
  };
};
</script>

<template>
  <Table.Root
    show-row-stripe
    show-column-border
  >
    <Table.Caption>
      Shopping Cart
    </Table.Caption>

    <Table.Header sticky>
      <Table.Row>
        <Table.ColumnHeader sticky="5rem">
          <Table.ColumnHeaderSorter
            column="id"
            :sort="sort"
            @sort="setSort"
          >
            #
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="product"
            :sort="sort"
            @sort="setSort"
          >
            Product
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="quantity"
            :sort="sort"
            @sort="setSort"
          >
            Quantity
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="price"
            :sort="sort"
            @sort="setSort"
          >
            Price
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>

        <Table.ColumnHeader>
          <Table.ColumnHeaderSorter
            column="total"
            :sort="sort"
            @sort="setSort"
          >
            Total
          </Table.ColumnHeaderSorter>
        </Table.ColumnHeader>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row
        v-for="row in sortedData"
        :key="row.id"
      >
        <Table.Cell sticky="5rem">
          {{ row.id }}
        </Table.Cell>

        <Table.Cell>
          {{ row.product }}
        </Table.Cell>

        <Table.Cell>
          {{ row.quantity }}
        </Table.Cell>

        <Table.Cell>
          {{ row.price }}
        </Table.Cell>

        <Table.Cell>
          {{ row.total }}
        </Table.Cell>
      </Table.Row>
    </Table.Body>

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

        <Table.Cell />

        <Table.Cell>
          {{ totals.quantity }}
        </Table.Cell>

        <Table.Cell />

        <Table.Cell>
          {{ totals.price.toFixed(2) }}
        </Table.Cell>
      </Table.Row>
    </Table.Footer>
  </Table.Root>
</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'