UI

Table

Display data efficiently in a column and row format.

GitHubStorybook
Recent invoices.
NameSales ($)RegionStatusWorking Hours (h)
Peter McCrown1,000,000Region Aoverperforming100
Jon Mueller2,202,000Region Boverperforming110
Peter Federer1,505,000Region Cunderperforming90
Maxime Bujet500,000Region Doverperforming92
Emma Nelly600,000Region Eunderperforming95
4,642497

Installation

  1. 1

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Table [v0.0.3]
import React from "react"
import { cx } from "@/lib/utils"
const TableRoot = React.forwardRef<  HTMLDivElement,  React.HTMLAttributes<HTMLDivElement>>(({ className, children, ...props }, forwardedRef) => (  <div    ref={forwardedRef}    // Activate if table is used in a float environment    // className="flow-root"  >    <div      // make table scrollable on mobile      className={cx("w-full overflow-auto whitespace-nowrap", className)}      {...props}    >      {children}    </div>  </div>))
TableRoot.displayName = "TableRoot"
const Table = React.forwardRef<  HTMLTableElement,  React.TableHTMLAttributes<HTMLTableElement>>(({ className, ...props }, forwardedRef) => (  <table    ref={forwardedRef}    tremor-id="tremor-raw"    className={cx(      // base      "w-full caption-bottom border-b",      // border color      "border-gray-200 dark:border-gray-800",      className,    )}    {...props}  />))
Table.displayName = "Table"
const TableHead = React.forwardRef<  HTMLTableSectionElement,  React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, forwardedRef) => (  <thead ref={forwardedRef} className={cx(className)} {...props} />))
TableHead.displayName = "TableHead"
const TableHeaderCell = React.forwardRef<  HTMLTableCellElement,  React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, forwardedRef) => (  <th    ref={forwardedRef}    className={cx(      // base      "border-b px-4 py-3.5 text-left text-sm font-semibold",      // text color      "text-gray-900 dark:text-gray-50",      // border color      "border-gray-200 dark:border-gray-800",      className,    )}    {...props}  />))
TableHeaderCell.displayName = "TableHeaderCell"
const TableBody = React.forwardRef<  HTMLTableSectionElement,  React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, forwardedRef) => (  <tbody    ref={forwardedRef}    className={cx(      // base      "divide-y",      // divide color      "divide-gray-200 dark:divide-gray-800",      className,    )}    {...props}  />))
TableBody.displayName = "TableBody"
const TableRow = React.forwardRef<  HTMLTableRowElement,  React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, forwardedRef) => (  <tr    ref={forwardedRef}    className={cx(      "[&_td:last-child]:pr-4 [&_th:last-child]:pr-4",      "[&_td:first-child]:pl-4 [&_th:first-child]:pl-4",      className,    )}    {...props}  />))
TableRow.displayName = "TableRow"
const TableCell = React.forwardRef<  HTMLTableCellElement,  React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, forwardedRef) => (  <td    ref={forwardedRef}    className={cx(      // base      "p-4 text-sm",      // text color      "text-gray-600 dark:text-gray-400",      className,    )}    {...props}  />))
TableCell.displayName = "TableCell"
const TableFoot = React.forwardRef<  HTMLTableSectionElement,  React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, forwardedRef) => {  return (    <tfoot      ref={forwardedRef}      className={cx(        // base        "border-t text-left font-medium",        // text color        "text-gray-900 dark:text-gray-50",        // border color        "border-gray-200 dark:border-gray-800",        className,      )}      {...props}    />  )})
TableFoot.displayName = "TableFoot"
const TableCaption = React.forwardRef<  HTMLTableCaptionElement,  React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, forwardedRef) => (  <caption    ref={forwardedRef}    className={cx(      // base      "mt-3 px-3 text-center text-sm",      // text color      "text-gray-500 dark:text-gray-500",      className,    )}    {...props}  />))
TableCaption.displayName = "TableCaption"
export {  Table,  TableBody,  TableCaption,  TableCell,  TableFoot,  TableHead,  TableHeaderCell,  TableRoot,  TableRow,}

Example: Table with Badges

Workspaces

Overview of all registered workspaces within your organization.

WorkspaceOwnerStatusRegionCapacityCostsLast edited
sales_by_day_apiJohn DoeLiveUS-West 199%$3,509.0023/09/2023 13:00
marketing_campaignJane SmithLiveUS-East 280%$5,720.0022/09/2023 10:45
test_environmentDavid ClarkInactiveEU-Central 140%$800.0025/09/2023 16:20
sales_campaignJane SmithLiveUS-East 280%$5,720.0022/09/2023 10:45
development_envMike JohnsonInactiveEU-West 160%$4,200.0021/09/2023 14:30
new_workspace_1Alice BrownInactiveUS-West 275%$2,100.0024/09/2023 09:15

API Reference: TableRoot

This component is based on the div element and supports all of its props.

API Reference: Table

This component is based on the table element and supports all of its props.

API Reference: TableHead

This component is based on the thead element and supports all of its props.

API Reference: TableBody

This component is based on the tbody element and supports all of its props.

API Reference: TableRow

This component is based on the tr element and supports all of its props.

API Reference: TableCell

This component is based on the td element and supports all of its props.

API Reference: TableHeaderCell

This component is based on the th element and supports all of its props.

API Reference: TableFoot

This component is based on the tfoot element and supports all of its props.

API Reference: TableCaption

This component is based on the caption element and supports all of its props.