Table

Usage

`{ "name": "string", "symbol": "string", "position": "number", "mass": "number" }`
Name	Symbol	Position	Mass
Carbon	C	6	12.011
Nitrogen	N	7	14.007
Yttrium	Y	39	88.906

import { Table, TableBody, TableCaption, TableData, TableHead, TableHeader, TableRow } from "@/ui/table";
import { Code } from "@/ui/code";

const data = [
  { name: "Carbon", symbol: "C", position: 6, mass: 12.011 },
  { name: "Nitrogen", symbol: "N", position: 7, mass: 14.007 },
  { name: "Yttrium", symbol: "Y", position: 39, mass: 88.906 },
  { name: "Barium", symbol: "Ba", position: 56, mass: 137.33 },
  { name: "Cerium", symbol: "Ce", position: 58, mass: 140.12 },
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 }
];

// Independent Components - Flat Component Structure
export function TableDemo() {
  return (
    <Table className="flex max-w-full flex-col items-center justify-center">
      <TableCaption className="px-2 text-left">
        <Code samp={data} className="w-full" />
      </TableCaption>

      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Symbol</TableHead>
          <TableHead>Position</TableHead>
          <TableHead>Mass</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        {data.slice(0, 3).map(i => (
          <TableRow key={i.name}>
            <TableData>{i.name}</TableData>
            <TableData>{i.symbol}</TableData>
            <TableData>{i.position}</TableData>
            <TableData>{i.mass}</TableData>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Properties

Some elements from periodic table
All	Element name	Symbol	Position	Atomic mass	Description
1	Sodium	Na	11	22.99	A soft metal that reacts vigorously with water.
2	Magnesium	Mg	12	24.305	A metal used in lightweight alloys.
3	Aluminum	Al	13	26.982	A lightweight, corrosion-resistant metal.
4	Silicon	Si	14	28.085	A key component in semiconductors.
5	Phosphorus	P	15	30.974	Essential for DNA and energy transfer in cells.
6	Sulfur	S	16	32.06	A yellow, nonmetallic element used in fertilizers.
7	Chlorine	Cl	17	35.45	A reactive halogen used for water purification.
8	Argon	Ar	18	39.948	A noble gas used in light bulbs and welding.
9	Potassium	K	19	39.098	An essential element for human health.
10	Calcium	Ca	20	40.078	A metal crucial for bones and teeth.
11	Iron	Fe	26	55.845	A key element in hemoglobin, the oxygen-carrying molecule in blood.
12	Copper	Cu	29	63.546	A conductor of electricity used in wiring.
13	Zinc	Zn	30	65.38	An essential trace element for humans.
14	Yttrium	Y	39	88.906	A rare-earth metal used in lasers and superconductors.
15	Barium	Ba	56	137.33	A metal used in medical imaging.
16	Cerium	Ce	58	140.12	A rare-earth element used in catalytic converters.
17	Hydrogen	H	1	1.008	The lightest element and most abundant chemical substance in the universe.
18	Helium	He	2	4.0026	A noble gas used in balloons and cooling systems.
19	Lithium	Li	3	6.94	A soft, silvery metal used in rechargeable batteries.
20	Beryllium	Be	4	9.0122	A hard metal used in aerospace materials.
21	Boron	B	5	10.81	An element used in glass and detergents.
22	Carbon	C	6	12.011	A versatile element, the basis for organic life.
23	Nitrogen	N	7	14.007	Makes up 78% of Earth's atmosphere.
24	Oxygen	O	8	15.999	Essential for respiration in most living organisms.
25	Fluorine	F	9	18.998	A highly reactive gas used in toothpaste.
26	Neon	Ne	10	20.18	A noble gas used in neon signs and lighting.

"use client";
import React from "react";
import { Input } from "@/ui/input";
import { Label } from "@/ui/label";
import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";
import { Table, dataRenderer, type TableDataProps } from "@/ui/table";
function name(value: string | number) {
  return String(value).toLowerCase().replace(/\s/g, "-");
}
function ConfiguratorDemo() {
  const [data, setData] = React.useState(somePeriodic);
  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
  const allRowPositions = React.useMemo(() => data.map(item => item.name), [data]);
  const isAllSelected = selectedRows.length === allRowPositions.length;
  const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.currentTarget.checked) {
      setSelectedRows(allRowPositions); // Select all rows
    } else {
      setSelectedRows([]); // Deselect all rows
    }
  };
  const handleDelete = () => {
    // Filter out rows that are not selected
    const newData = data.filter(item => !selectedRows.includes(item.name));
    setData(newData); // Update data
    setSelectedRows([]); // Clear selected rows
  };
  const tableData: TableDataProps = {
    caption: (
      <div className="grid grid-flow-row items-center justify-center">
        <span>{data.length ? "Some elements from periodic table" : "Empty"}</span>
      </div>
    ),
    head: [
      <Label key={"select-all"} htmlFor="select-all" aria-label="select-all" className="mt-1.5 h-[17px] cursor-pointer">
        <Input
          type="checkbox"
          id="select-all"
          name="select-all"
          aria-label="Select All"
          checked={data.length > 0 && isAllSelected}
          indeterminate={isSomeSelected}
          onChange={handleSelectAll}
        />
        &nbsp;&nbsp;All
      </Label>,
      "Element name",
      "Symbol",
      "Position",
      "Atomic mass",
      "Description"
    ],
    body: dataRenderer(data, [
      (item, index) => (
        <div className="flex flex-row items-center justify-start gap-1">
          <Input
            type="checkbox"
            id={name(item.name)}
            name={name(item.name)}
            aria-label="Select row"
            checked={selectedRows.includes(item.name)}
            onChange={event => setSelectedRows(event.currentTarget.checked ? [...selectedRows, item.name] : selectedRows.filter(name => name !== item.name))}
          />
          &nbsp;&nbsp;{index + 1}
        </div>
      ),
      item => (
        <Label htmlFor={name(item.name)} className="cursor-pointer">
          {item.name}
        </Label>
      ),
      "symbol",
      "position",
      "mass",
      "description"
    ])
  };
  return (
    <Stack>
      <Table
        data={tableData}
        spacing={{ x: 13, y: 10 }}
        styles={{
          root: {
            height: "29rem"
          },
          trbody: index => ({
            backgroundColor: selectedRows.includes(data[index].name) ? "rgba(0, 123, 255, 0.15)" : undefined
          })
        }}
      />
      <Button variant="destructive" size="default" className="w-max" disabled={selectedRows.length === 0} onClick={handleDelete}>
        Delete
      </Button>
    </Stack>
  );
}
const somePeriodic = [
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99, description: "A soft metal that reacts vigorously with water." },
  { name: "Magnesium", symbol: "Mg", position: 12, mass: 24.305, description: "A metal used in lightweight alloys." },
  { name: "Aluminum", symbol: "Al", position: 13, mass: 26.982, description: "A lightweight, corrosion-resistant metal." },
  { name: "Silicon", symbol: "Si", position: 14, mass: 28.085, description: "A key component in semiconductors." },
  { name: "Phosphorus", symbol: "P", position: 15, mass: 30.974, description: "Essential for DNA and energy transfer in cells." },
  { name: "Sulfur", symbol: "S", position: 16, mass: 32.06, description: "A yellow, nonmetallic element used in fertilizers." },
  { name: "Chlorine", symbol: "Cl", position: 17, mass: 35.45, description: "A reactive halogen used for water purification." },
  { name: "Argon", symbol: "Ar", position: 18, mass: 39.948, description: "A noble gas used in light bulbs and welding." },
  { name: "Potassium", symbol: "K", position: 19, mass: 39.098, description: "An essential element for human health." },
  { name: "Calcium", symbol: "Ca", position: 20, mass: 40.078, description: "A metal crucial for bones and teeth." },
  { name: "Iron", symbol: "Fe", position: 26, mass: 55.845, description: "A key element in hemoglobin, the oxygen-carrying molecule in blood." },
  { name: "Copper", symbol: "Cu", position: 29, mass: 63.546, description: "A conductor of electricity used in wiring." },
  { name: "Zinc", symbol: "Zn", position: 30, mass: 65.38, description: "An essential trace element for humans." },
  { name: "Yttrium", symbol: "Y", position: 39, mass: 88.906, description: "A rare-earth metal used in lasers and superconductors." },
  { name: "Barium", symbol: "Ba", position: 56, mass: 137.33, description: "A metal used in medical imaging." },
  { name: "Cerium", symbol: "Ce", position: 58, mass: 140.12, description: "A rare-earth element used in catalytic converters." },
  { name: "Hydrogen", symbol: "H", position: 1, mass: 1.008, description: "The lightest element and most abundant chemical substance in the universe." },
  { name: "Helium", symbol: "He", position: 2, mass: 4.0026, description: "A noble gas used in balloons and cooling systems." },
  { name: "Lithium", symbol: "Li", position: 3, mass: 6.94, description: "A soft, silvery metal used in rechargeable batteries." },
  { name: "Beryllium", symbol: "Be", position: 4, mass: 9.0122, description: "A hard metal used in aerospace materials." },
  { name: "Boron", symbol: "B", position: 5, mass: 10.81, description: "An element used in glass and detergents." },
  { name: "Carbon", symbol: "C", position: 6, mass: 12.011, description: "A versatile element, the basis for organic life." },
  { name: "Nitrogen", symbol: "N", position: 7, mass: 14.007, description: "Makes up 78% of Earth's atmosphere." },
  { name: "Oxygen", symbol: "O", position: 8, mass: 15.999, description: "Essential for respiration in most living organisms." },
  { name: "Fluorine", symbol: "F", position: 9, mass: 18.998, description: "A highly reactive gas used in toothpaste." },
  { name: "Neon", symbol: "Ne", position: 10, mass: 20.18, description: "A noble gas used in neon signs and lighting." }
];

Structure

Independent Components

import { Table, TableBody, TableCaption, TableData, TableHead, TableHeader, TableRow } from "@/ui/table";
 
const data = [
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 },
  { name: "Magnesium", symbol: "Mg", position: 12, mass: 24.305 }
  // others
];
 
export function TableDemo() {
  return (
    <Table>
      <TableCaption>
        Flat Component Structure
        <br />
        (Independent Components)
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Symbol</TableHead>
          <TableHead>Position</TableHead>
          <TableHead>Mass</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.slice(0, 3).map(i => (
          <TableRow key={i.name}>
            <TableData>{i.name}</TableData>
            <TableData>{i.symbol}</TableData>
            <TableData>{i.position}</TableData>
            <TableData>{i.mass}</TableData>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Compound Components

"use client";
import { Table } from "@/ui/table";
 
const data = [
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 },
  { name: "Magnesium", symbol: "Mg", position: 12, mass: 24.305 }
  // others
];
 
export function TableDemo() {
  return (
    <Table>
      <Table.Caption>
        Namespaced Component Structure
        <br />
        (Compound Components)
      </Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Symbol</Table.Head>
          <Table.Head>Position</Table.Head>
          <Table.Head>Mass</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.slice(3, 6).map(i => (
          <Table.Row key={i.name}>
            <Table.Data>{i.name}</Table.Data>
            <Table.Data>{i.symbol}</Table.Data>
            <Table.Data>{i.position}</Table.Data>
            <Table.Data>{i.mass}</Table.Data>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Declarative Props API

import { Table, dataRenderer, type TableDataProps } from "@/ui/table";
 
const data = [
  {
    name: "Sodium",
    symbol: "Na",
    position: 11,
    mass: 22.99,
    description: "A soft metal that reacts vigorously with water."
  },
  {
    name: "Magnesium",
    symbol: "Mg",
    position: 12,
    mass: 24.305,
    description: "A metal used in lightweight alloys."
  }
  // others
];
 
const tableData: TableDataProps = {
  caption: "Some elements from periodic table",
  head: ["Element name", "Symbol", "Element position", "Atomic mass", "Description"],
  body: dataRenderer(data, ["name", "symbol", "position", "mass", "description"])
};
 
export function TableDemo() {
  return <Table data={tableData} overflow spacing={{ x: "16px", y: "20px" }} />;
}

API References

mdn

Styles API

type T = "root" | "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td" | "caption";

Styles API	Type	Default	Annotation
unstyled`?`	`Partial<Record<T, boolean>>`	`false`	if `true`, default styles will be removed
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<T, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<T, CSSProperties>>`	`undefined`

Props API

type Spacing = { x?: number | string; y?: number | string };
type Striped = boolean | "odd" | "even";
type Variant = "horizontal" | "vertical";

Props API	Type	Default	Annotation
data`?`	`TableData`	`undefined`	Data that should be used to generate table, ignored if `children` prop is set
variant`?`	`Variant`	`horizontal`	Determines whether the first column in each row is sticky or not
layout`?`	`["tableLayout"]`	`auto`	Value of `table-layout` style
striped`?`	`Striped`	`undefined`	Determines whether every odd/even row background should be changed to `strippedColor`
captionSide`?`	`"top" \| "bottom"`	`bottom`	Determines on which side `Table.Caption` is displayed
tableOverflow`?`	`boolean`	`true`	Set table scroll area
stickyHeader`?`	`boolean`	`true`	Determines whether `Table.Thead` should be sticky
stickyHeaderOffset`?`	`number \| string`	`0`	Offset from top at which `Table.Thead` should become sticky
spacing`?`	`Spacing`	`{ x = 0, y = 8 }`	x = Horizontal, y = Vertical cells spacing or any valid CSS value for padding
highlightOnHover`?`	`boolean`	`true`	Determines whether table rows background should change to `highlightOnHoverColor` when hovered
withTableBorder`?`	`boolean`	`true`	Determines whether the table should have outer border
withColumnBorders`?`	`boolean`	`false`	Determines whether the table should have borders between columns
withRowBorders`?`	`boolean`	`true`	Determines whether the table should have borders between rows
stickyHeader`?`	`boolean`	`false`	Set table scroll area
highlightOnHoverColor`?`	`Property.Color`	`hsl(var(--primitive))`	Background color of table rows when hovered, key of CSS color
borderColor`?`	`Property.Color`	`hsl(var(--border))`	Color of table borders, key of CSS color
stripedColor`?`	`Property.Color`	`hsl(var(--background-box))`	Background color of striped rows, key of CSS color

/* table */ @layer base { .stylelayer-table { @apply relative ltr:text-left rtl:text-right [--table-border:0.0625rem_solid_var(--table-border-color)]; &:where([data-table-border]) { @apply [border:--table-border]; } &:where([data-table-overflow]) { @apply w-full min-w-full max-w-full overflow-auto [scrollbar-color:#adb3bd_#0000] [scrollbar-width:thin] [scrollbar-gutter:auto] [&>table]:min-w-full [&>table]:max-w-max; & table:where([data-variant="horizontal"]) tr { & th, & td { &:nth-child(1) { @apply sticky left-0 border-r-0 bg-[--bg-sticky-horizontal] [--bg-sticky-horizontal:--bg-table-row,hsl(var(--background))]; & { @apply after:absolute after:z-2 after:content-[''] after:right-0 after:inset-y-0 after:h-full after:w-1 after:[border-left:--table-border,none] after:[border-right:--table-border,none] after:bg-[--bg-sticky-horizontal]; } } } } } &:where([data-column-border]) { & .th, & .td { &:where(:not(:last-child)) { @apply [--column-border:--table-border]; } } } &:where([data-row-border]) { @apply [--row-border:--table-border]; & :where(thead > tr) { @apply border-b-transparent; } &:where([data-table-border]) { & .table:has(caption) { & tbody tr:where(:last-of-type) { @apply [--nth-of-type-border:--row-border,none]; } } } } & .table { @apply border-collapse [table-layout:--table-layout,auto] [caption-side:--table-caption-side,bottom]; } & .thead { @apply relative z-1 after:content-[''] after:absolute after:z-2 after:w-full after:h-1 after:bg-transparent after:inset-x-0 after:bottom-0 after:[border-bottom:--table-border,none] after:[border-top:--row-border,none]; &:where([data-sticky]) { @apply sticky top-[--table-sticky-header-offset,0] bg-background; } } & .tbody { @apply data-[state=active]:[&_tr]:bg-muted/55; & :where(tr) { @apply last-of-type:[border-bottom:--nth-of-type-border,none]; &:where([data-striped="odd"]:nth-of-type(odd)) { @apply [--bg-table-row:--table-striped-color]; } &:where([data-striped="even"]:nth-of-type(even)) { @apply [--bg-table-row:--table-striped-color]; } &:where([data-hover]) { @apply [--tr-hover-bg:--table-highlight-on-hover-color,var(--table-hover-color)]; } } } & .tfoot { @apply bg-muted font-medium; } & .tr { @apply [border-bottom:--row-border,none] bg-[--bg-table-row,transparent] appearance-none relative; &:where([data-hover]) { @apply hover:[--bg-table-row:--tr-hover-bg]; } } & .th { @apply h-10 font-medium align-middle [&:has([role=checkbox])]:pr-0; } & .td { @apply [&:where(:not([data-table=root])_td)]:align-text-top; } & .th, & .td { @apply first:pl-4 last:pr-4 p-[--table-spacing]; &:where(:not(:last-child)) { @apply [border-inline-end:--column-border,none]; } } & .caption { @apply text-sm text-muted-foreground; &:where([data-side="top"]) { @apply py-[--table-vertical-spacing] [border-bottom:--row-border,none]; } &:where([data-side="bottom"]) { @apply py-[--table-vertical-spacing]; } } } }

Table

Usage

`{ "name": "string", "symbol": "string", "position": "number", "mass": "number" }`
Name	Symbol	Position	Mass
Carbon	C	6	12.011
Nitrogen	N	7	14.007
Yttrium	Y	39	88.906

import { Table, TableBody, TableCaption, TableData, TableHead, TableHeader, TableRow } from "@/ui/table";
import { Code } from "@/ui/code";

const data = [
  { name: "Carbon", symbol: "C", position: 6, mass: 12.011 },
  { name: "Nitrogen", symbol: "N", position: 7, mass: 14.007 },
  { name: "Yttrium", symbol: "Y", position: 39, mass: 88.906 },
  { name: "Barium", symbol: "Ba", position: 56, mass: 137.33 },
  { name: "Cerium", symbol: "Ce", position: 58, mass: 140.12 },
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 }
];

// Independent Components - Flat Component Structure
export function TableDemo() {
  return (
    <Table className="flex max-w-full flex-col items-center justify-center">
      <TableCaption className="px-2 text-left">
        <Code samp={data} className="w-full" />
      </TableCaption>

      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Symbol</TableHead>
          <TableHead>Position</TableHead>
          <TableHead>Mass</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        {data.slice(0, 3).map(i => (
          <TableRow key={i.name}>
            <TableData>{i.name}</TableData>
            <TableData>{i.symbol}</TableData>
            <TableData>{i.position}</TableData>
            <TableData>{i.mass}</TableData>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Properties

Some elements from periodic table
All	Element name	Symbol	Position	Atomic mass	Description
1	Sodium	Na	11	22.99	A soft metal that reacts vigorously with water.
2	Magnesium	Mg	12	24.305	A metal used in lightweight alloys.
3	Aluminum	Al	13	26.982	A lightweight, corrosion-resistant metal.
4	Silicon	Si	14	28.085	A key component in semiconductors.
5	Phosphorus	P	15	30.974	Essential for DNA and energy transfer in cells.
6	Sulfur	S	16	32.06	A yellow, nonmetallic element used in fertilizers.
7	Chlorine	Cl	17	35.45	A reactive halogen used for water purification.
8	Argon	Ar	18	39.948	A noble gas used in light bulbs and welding.
9	Potassium	K	19	39.098	An essential element for human health.
10	Calcium	Ca	20	40.078	A metal crucial for bones and teeth.
11	Iron	Fe	26	55.845	A key element in hemoglobin, the oxygen-carrying molecule in blood.
12	Copper	Cu	29	63.546	A conductor of electricity used in wiring.
13	Zinc	Zn	30	65.38	An essential trace element for humans.
14	Yttrium	Y	39	88.906	A rare-earth metal used in lasers and superconductors.
15	Barium	Ba	56	137.33	A metal used in medical imaging.
16	Cerium	Ce	58	140.12	A rare-earth element used in catalytic converters.
17	Hydrogen	H	1	1.008	The lightest element and most abundant chemical substance in the universe.
18	Helium	He	2	4.0026	A noble gas used in balloons and cooling systems.
19	Lithium	Li	3	6.94	A soft, silvery metal used in rechargeable batteries.
20	Beryllium	Be	4	9.0122	A hard metal used in aerospace materials.
21	Boron	B	5	10.81	An element used in glass and detergents.
22	Carbon	C	6	12.011	A versatile element, the basis for organic life.
23	Nitrogen	N	7	14.007	Makes up 78% of Earth's atmosphere.
24	Oxygen	O	8	15.999	Essential for respiration in most living organisms.
25	Fluorine	F	9	18.998	A highly reactive gas used in toothpaste.
26	Neon	Ne	10	20.18	A noble gas used in neon signs and lighting.

"use client";
import React from "react";
import { Input } from "@/ui/input";
import { Label } from "@/ui/label";
import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";
import { Table, dataRenderer, type TableDataProps } from "@/ui/table";
function name(value: string | number) {
  return String(value).toLowerCase().replace(/\s/g, "-");
}
function ConfiguratorDemo() {
  const [data, setData] = React.useState(somePeriodic);
  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
  const allRowPositions = React.useMemo(() => data.map(item => item.name), [data]);
  const isAllSelected = selectedRows.length === allRowPositions.length;
  const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.currentTarget.checked) {
      setSelectedRows(allRowPositions); // Select all rows
    } else {
      setSelectedRows([]); // Deselect all rows
    }
  };
  const handleDelete = () => {
    // Filter out rows that are not selected
    const newData = data.filter(item => !selectedRows.includes(item.name));
    setData(newData); // Update data
    setSelectedRows([]); // Clear selected rows
  };
  const tableData: TableDataProps = {
    caption: (
      <div className="grid grid-flow-row items-center justify-center">
        <span>{data.length ? "Some elements from periodic table" : "Empty"}</span>
      </div>
    ),
    head: [
      <Label key={"select-all"} htmlFor="select-all" aria-label="select-all" className="mt-1.5 h-[17px] cursor-pointer">
        <Input
          type="checkbox"
          id="select-all"
          name="select-all"
          aria-label="Select All"
          checked={data.length > 0 && isAllSelected}
          indeterminate={isSomeSelected}
          onChange={handleSelectAll}
        />
        &nbsp;&nbsp;All
      </Label>,
      "Element name",
      "Symbol",
      "Position",
      "Atomic mass",
      "Description"
    ],
    body: dataRenderer(data, [
      (item, index) => (
        <div className="flex flex-row items-center justify-start gap-1">
          <Input
            type="checkbox"
            id={name(item.name)}
            name={name(item.name)}
            aria-label="Select row"
            checked={selectedRows.includes(item.name)}
            onChange={event => setSelectedRows(event.currentTarget.checked ? [...selectedRows, item.name] : selectedRows.filter(name => name !== item.name))}
          />
          &nbsp;&nbsp;{index + 1}
        </div>
      ),
      item => (
        <Label htmlFor={name(item.name)} className="cursor-pointer">
          {item.name}
        </Label>
      ),
      "symbol",
      "position",
      "mass",
      "description"
    ])
  };
  return (
    <Stack>
      <Table
        data={tableData}
        spacing={{ x: 13, y: 10 }}
        styles={{
          root: {
            height: "29rem"
          },
          trbody: index => ({
            backgroundColor: selectedRows.includes(data[index].name) ? "rgba(0, 123, 255, 0.15)" : undefined
          })
        }}
      />
      <Button variant="destructive" size="default" className="w-max" disabled={selectedRows.length === 0} onClick={handleDelete}>
        Delete
      </Button>
    </Stack>
  );
}
const somePeriodic = [
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99, description: "A soft metal that reacts vigorously with water." },
  { name: "Magnesium", symbol: "Mg", position: 12, mass: 24.305, description: "A metal used in lightweight alloys." },
  { name: "Aluminum", symbol: "Al", position: 13, mass: 26.982, description: "A lightweight, corrosion-resistant metal." },
  { name: "Silicon", symbol: "Si", position: 14, mass: 28.085, description: "A key component in semiconductors." },
  { name: "Phosphorus", symbol: "P", position: 15, mass: 30.974, description: "Essential for DNA and energy transfer in cells." },
  { name: "Sulfur", symbol: "S", position: 16, mass: 32.06, description: "A yellow, nonmetallic element used in fertilizers." },
  { name: "Chlorine", symbol: "Cl", position: 17, mass: 35.45, description: "A reactive halogen used for water purification." },
  { name: "Argon", symbol: "Ar", position: 18, mass: 39.948, description: "A noble gas used in light bulbs and welding." },
  { name: "Potassium", symbol: "K", position: 19, mass: 39.098, description: "An essential element for human health." },
  { name: "Calcium", symbol: "Ca", position: 20, mass: 40.078, description: "A metal crucial for bones and teeth." },
  { name: "Iron", symbol: "Fe", position: 26, mass: 55.845, description: "A key element in hemoglobin, the oxygen-carrying molecule in blood." },
  { name: "Copper", symbol: "Cu", position: 29, mass: 63.546, description: "A conductor of electricity used in wiring." },
  { name: "Zinc", symbol: "Zn", position: 30, mass: 65.38, description: "An essential trace element for humans." },
  { name: "Yttrium", symbol: "Y", position: 39, mass: 88.906, description: "A rare-earth metal used in lasers and superconductors." },
  { name: "Barium", symbol: "Ba", position: 56, mass: 137.33, description: "A metal used in medical imaging." },
  { name: "Cerium", symbol: "Ce", position: 58, mass: 140.12, description: "A rare-earth element used in catalytic converters." },
  { name: "Hydrogen", symbol: "H", position: 1, mass: 1.008, description: "The lightest element and most abundant chemical substance in the universe." },
  { name: "Helium", symbol: "He", position: 2, mass: 4.0026, description: "A noble gas used in balloons and cooling systems." },
  { name: "Lithium", symbol: "Li", position: 3, mass: 6.94, description: "A soft, silvery metal used in rechargeable batteries." },
  { name: "Beryllium", symbol: "Be", position: 4, mass: 9.0122, description: "A hard metal used in aerospace materials." },
  { name: "Boron", symbol: "B", position: 5, mass: 10.81, description: "An element used in glass and detergents." },
  { name: "Carbon", symbol: "C", position: 6, mass: 12.011, description: "A versatile element, the basis for organic life." },
  { name: "Nitrogen", symbol: "N", position: 7, mass: 14.007, description: "Makes up 78% of Earth's atmosphere." },
  { name: "Oxygen", symbol: "O", position: 8, mass: 15.999, description: "Essential for respiration in most living organisms." },
  { name: "Fluorine", symbol: "F", position: 9, mass: 18.998, description: "A highly reactive gas used in toothpaste." },
  { name: "Neon", symbol: "Ne", position: 10, mass: 20.18, description: "A noble gas used in neon signs and lighting." }
];

Structure

Independent Components

import { Table, TableBody, TableCaption, TableData, TableHead, TableHeader, TableRow } from "@/ui/table";
 
const data = [
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 },
  { name: "Magnesium", symbol: "Mg", position: 12, mass: 24.305 }
  // others
];
 
export function TableDemo() {
  return (
    <Table>
      <TableCaption>
        Flat Component Structure
        <br />
        (Independent Components)
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Symbol</TableHead>
          <TableHead>Position</TableHead>
          <TableHead>Mass</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.slice(0, 3).map(i => (
          <TableRow key={i.name}>
            <TableData>{i.name}</TableData>
            <TableData>{i.symbol}</TableData>
            <TableData>{i.position}</TableData>
            <TableData>{i.mass}</TableData>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Compound Components

"use client";
import { Table } from "@/ui/table";
 
const data = [
  { name: "Sodium", symbol: "Na", position: 11, mass: 22.99 },
  { name: "Magnesium", symbol: "Mg", position: 12, mass: 24.305 }
  // others
];
 
export function TableDemo() {
  return (
    <Table>
      <Table.Caption>
        Namespaced Component Structure
        <br />
        (Compound Components)
      </Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Symbol</Table.Head>
          <Table.Head>Position</Table.Head>
          <Table.Head>Mass</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.slice(3, 6).map(i => (
          <Table.Row key={i.name}>
            <Table.Data>{i.name}</Table.Data>
            <Table.Data>{i.symbol}</Table.Data>
            <Table.Data>{i.position}</Table.Data>
            <Table.Data>{i.mass}</Table.Data>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Declarative Props API

import { Table, dataRenderer, type TableDataProps } from "@/ui/table";
 
const data = [
  {
    name: "Sodium",
    symbol: "Na",
    position: 11,
    mass: 22.99,
    description: "A soft metal that reacts vigorously with water."
  },
  {
    name: "Magnesium",
    symbol: "Mg",
    position: 12,
    mass: 24.305,
    description: "A metal used in lightweight alloys."
  }
  // others
];
 
const tableData: TableDataProps = {
  caption: "Some elements from periodic table",
  head: ["Element name", "Symbol", "Element position", "Atomic mass", "Description"],
  body: dataRenderer(data, ["name", "symbol", "position", "mass", "description"])
};
 
export function TableDemo() {
  return <Table data={tableData} overflow spacing={{ x: "16px", y: "20px" }} />;
}

API References

mdn

Styles API

type T = "root" | "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td" | "caption";

Styles API	Type	Default	Annotation
unstyled`?`	`Partial<Record<T, boolean>>`	`false`	if `true`, default styles will be removed
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<T, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<T, CSSProperties>>`	`undefined`

Props API

type Spacing = { x?: number | string; y?: number | string };
type Striped = boolean | "odd" | "even";
type Variant = "horizontal" | "vertical";

Props API	Type	Default	Annotation
data`?`	`TableData`	`undefined`	Data that should be used to generate table, ignored if `children` prop is set
variant`?`	`Variant`	`horizontal`	Determines whether the first column in each row is sticky or not
layout`?`	`["tableLayout"]`	`auto`	Value of `table-layout` style
striped`?`	`Striped`	`undefined`	Determines whether every odd/even row background should be changed to `strippedColor`
captionSide`?`	`"top" \| "bottom"`	`bottom`	Determines on which side `Table.Caption` is displayed
tableOverflow`?`	`boolean`	`true`	Set table scroll area
stickyHeader`?`	`boolean`	`true`	Determines whether `Table.Thead` should be sticky
stickyHeaderOffset`?`	`number \| string`	`0`	Offset from top at which `Table.Thead` should become sticky
spacing`?`	`Spacing`	`{ x = 0, y = 8 }`	x = Horizontal, y = Vertical cells spacing or any valid CSS value for padding
highlightOnHover`?`	`boolean`	`true`	Determines whether table rows background should change to `highlightOnHoverColor` when hovered
withTableBorder`?`	`boolean`	`true`	Determines whether the table should have outer border
withColumnBorders`?`	`boolean`	`false`	Determines whether the table should have borders between columns
withRowBorders`?`	`boolean`	`true`	Determines whether the table should have borders between rows
stickyHeader`?`	`boolean`	`false`	Set table scroll area
highlightOnHoverColor`?`	`Property.Color`	`hsl(var(--primitive))`	Background color of table rows when hovered, key of CSS color
borderColor`?`	`Property.Color`	`hsl(var(--border))`	Color of table borders, key of CSS color
stripedColor`?`	`Property.Color`	`hsl(var(--background-box))`	Background color of striped rows, key of CSS color

Table

Usage

Properties

Structure

Independent Components

Compound Components

Declarative Props API

API References

Styles API

Props API

Source Codes

table.tsx

globals.css

Table

Usage

Properties

Structure

Independent Components

Compound Components

Declarative Props API

API References

Styles API

Props API

Source Codes

table.tsx

globals.css