CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tremor--react

Tremor React is a comprehensive React component library built on Tailwind CSS providing 60+ components for building data visualizations, charts, and analytical dashboards.

Overview
Eval results
Files

list-elements.mddocs/

List Elements

Semantic HTML list and table components with Tremor styling.

Component Overview

ComponentPurpose
List / ListItemVertical lists with dividers, flexbox layout
Table / TableHead / TableBody / TableFootSemantic data tables with sticky headers
TableRow / TableHeaderCell / TableCell / TableFooterCellTable structure elements

All components are styled wrappers around native HTML elements supporting standard HTML attributes.

List & ListItem

interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
  children: React.ReactNode; // ListItem components
}

interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
  children: React.ReactNode; // Uses flexbox with space-between justify
}

Examples:

import { List, ListItem } from '@tremor/react';

// Simple list
<List>
  <ListItem>Item 1</ListItem>
  <ListItem>Item 2</ListItem>
  <ListItem>Item 3</ListItem>
</List>

// Key-value pairs (ListItem has justify-between)
<List>
  <ListItem>
    <span>Product Name</span>
    <span className="font-medium">$99.99</span>
  </ListItem>
  <ListItem>
    <span>Product Name 2</span>
    <span className="font-medium">$149.99</span>
  </ListItem>
</List>

// Complex list items
<List>
  <ListItem>
    <div>
      <p className="font-medium">Revenue</p>
      <p className="text-tremor-content-subtle">Year to date</p>
    </div>
    <p className="font-semibold">$1,234,567</p>
  </ListItem>
</List>

Table Components

Full semantic table structure with responsive overflow scrolling.

// Container with overflow scrolling
interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
  children: React.ReactNode; // TableHead, TableBody, TableFoot
}

// Sections
interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
  children: React.ReactNode; // TableRow with TableHeaderCell
}

interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
  children: React.ReactNode; // TableRow with TableCell
}

interface TableFootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
  children: React.ReactNode; // TableRow with TableFooterCell
}

// Rows
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
  children: React.ReactNode;
}

// Cells
interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
  children?: React.ReactNode;
  scope?: "col" | "row" | "colgroup" | "rowgroup"; // Accessibility
}

interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
  children?: React.ReactNode;
}

interface TableFooterCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
  children?: React.ReactNode;
}

Examples:

import {
  Table,
  TableHead,
  TableBody,
  TableFoot,
  TableRow,
  TableHeaderCell,
  TableCell,
  TableFooterCell,
} from '@tremor/react';

// Basic table
<Table>
  <TableHead>
    <TableRow>
      <TableHeaderCell>Name</TableHeaderCell>
      <TableHeaderCell>Status</TableHeaderCell>
      <TableHeaderCell>Amount</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Alice Johnson</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>$1,234</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob Smith</TableCell>
      <TableCell>Inactive</TableCell>
      <TableCell>$567</TableCell>
    </TableRow>
  </TableBody>
</Table>

// With footer totals
const data = [
  { name: 'Alice', region: 'North', sales: 12500 },
  { name: 'Bob', region: 'South', sales: 9800 },
];
const total = data.reduce((sum, row) => sum + row.sales, 0);

<Table>
  <TableHead>
    <TableRow>
      <TableHeaderCell scope="col">Name</TableHeaderCell>
      <TableHeaderCell scope="col">Region</TableHeaderCell>
      <TableHeaderCell scope="col">Sales</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {data.map((row) => (
      <TableRow key={row.name}>
        <TableCell>{row.name}</TableCell>
        <TableCell>{row.region}</TableCell>
        <TableCell>${row.sales.toLocaleString()}</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFoot>
    <TableRow>
      <TableFooterCell colSpan={2}>Total</TableFooterCell>
      <TableFooterCell>${total.toLocaleString()}</TableFooterCell>
    </TableRow>
  </TableFoot>
</Table>

// With sticky header (TableHeaderCell has sticky positioning)
<div className="max-h-96 overflow-auto">
  <Table>
    <TableHead>
      <TableRow>
        <TableHeaderCell>Column 1</TableHeaderCell>
        <TableHeaderCell>Column 2</TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {/* Many rows... sticky header stays visible */}
    </TableBody>
  </Table>
</div>

Best Practices

List Usage

  • Use List/ListItem for simple vertical lists with dividers
  • ListItem has justify-between flexbox - perfect for key-value layouts
  • Wrap complex content in divs to control layout

Table Usage

  • Always use semantic structure: TableHead, TableBody, optionally TableFoot
  • TableHeaderCell and TableFooterCell render as <th> for accessibility
  • Use scope attribute on TableHeaderCell for screen readers
  • Table automatically handles horizontal overflow with scrolling
  • TableHeaderCell has sticky positioning (top-0) for fixed headers when scrolling
  • Use colSpan and rowSpan on cells for complex layouts

Accessibility

// Good: Proper scope for headers
<TableHead>
  <TableRow>
    <TableHeaderCell scope="col">Name</TableHeaderCell>
    <TableHeaderCell scope="col">Value</TableHeaderCell>
  </TableRow>
</TableHead>

// Good: Row header
<TableBody>
  <TableRow>
    <TableHeaderCell scope="row">Total</TableHeaderCell>
    <TableCell>$1,000</TableCell>
  </TableRow>
</TableBody>

Design Notes

  • All components support standard HTML attributes for their respective elements
  • Use React forwardRef for DOM access
  • Automatically adapt to light/dark mode
  • No custom Tremor-specific props - they're styled HTML wrappers

Common Mistakes

  • ❌ Not using semantic table structure (head/body/foot)
  • ❌ Using TableCell in TableHead (use TableHeaderCell)
  • ❌ Forgetting scope attribute on headers (accessibility)
  • ❌ Not wrapping complex ListItem content in divs (layout issues)
  • ❌ Using List for data tables (use Table instead)

See Also

  • Types Reference for TypeScript types

Install with Tessl CLI

npx tessl i tessl/npm-tremor--react

docs

chart-elements.md

common-props.md

icon-elements.md

index.md

input-elements.md

layout-elements.md

list-elements.md

text-elements.md

types.md

visualization-elements.md

tile.json