Overview
Icons
Theme
Installation
Components
Accordion
Alert
Area Chart
Avatar
Badge
Bar Chart
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Card
Checkbox Group
Context Menu
Copy to clipboard button
Dialog
Drawer
Dropdown Menu
Fullscreen Dialog
Icon Button
Icon with background
Line Chart
Link Button
Loader
Pie Chart
Progress
Radio Card Group
Radio Group
Select
Sidebar with sections
Skeleton Circle
Skeleton Text
Slider
Stepper
Switch
Table
Tabs
Text Area
Text Field
Toast
Toggle Group
Tooltip
Tree View
Vertical Stepper

Table

Displays data in a tabular format.

Name
Email
Role
John Walton
[email protected]
Engineering
Sarah Chandler
[email protected]
Design
Susan Best
[email protected]
Product
Slots
header
Header Row1 prop
Header2 props
Header2 props
Header2 props
children
Row2 props
Cell1 prop
Cell1 prop
Cell1 prop
Badge4 props
Cell1 prop
Icon Button5 props
Dropdown Menu1 prop
Dropdown Item3 props
Dropdown Item3 props
Dropdown Item3 props
Dropdown Item3 props
Row2 props
Cell1 prop
Cell1 prop
Cell1 prop
Badge4 props
Cell1 prop
Icon Button5 props
Dropdown Menu1 prop
Dropdown Item3 props
Dropdown Item3 props
Dropdown Item3 props
Dropdown Item3 props
Row2 props
Text Cell1 prop
Text Cell1 prop
Badge Cell1 prop
Badge4 props
Cell1 prop
Icon Button5 props
Dropdown Menu1 prop
Dropdown Item3 props
Dropdown Item3 props
Dropdown Item3 props
Dropdown Item3 props

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import { Badge } from "@/ui/components/Badge";
import { DropdownMenu } from "@/ui/components/DropdownMenu";
import { IconButton } from "@/ui/components/IconButton";
import { Table } from "@/ui/components/Table";
import { FeatherEdit2 } from "@subframe/core";
import { FeatherMoreHorizontal } from "@subframe/core";
import { FeatherPlus } from "@subframe/core";
import { FeatherStar } from "@subframe/core";
import { FeatherTrash } from "@subframe/core";
import * as SubframeCore from "@subframe/core";

function TableExample() {
  return (
    <Table
      header={
        <Table.HeaderRow>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Email</Table.HeaderCell>
          <Table.HeaderCell>Role</Table.HeaderCell>
        </Table.HeaderRow>
      }
    >
      <Table.Row>
        <Table.Cell>
          <span className="whitespace-nowrap text-body-bold font-body-bold text-neutral-700">
            John Walton
          </span>
        </Table.Cell>
        <Table.Cell>
          <span className="whitespace-nowrap text-body font-body text-neutral-500">
            [email protected]
          </span>
        </Table.Cell>
        <Table.Cell>
          <Badge>Engineering</Badge>
        </Table.Cell>
        <Table.Cell>
          <div className="flex grow shrink-0 basis-0 items-center justify-end">
            <SubframeCore.DropdownMenu.Root>
              <SubframeCore.DropdownMenu.Trigger asChild={true}>
                <IconButton
                  size="medium"
                  icon={<FeatherMoreHorizontal />}
                  onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
                />
              </SubframeCore.DropdownMenu.Trigger>
              <SubframeCore.DropdownMenu.Portal>
                <SubframeCore.DropdownMenu.Content
                  side="bottom"
                  align="end"
                  sideOffset={8}
                  asChild={true}
                >
                  <DropdownMenu>
                    <DropdownMenu.DropdownItem icon={<FeatherStar />}>
                      Favorite
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherPlus />}>
                      Add
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherEdit2 />}>
                      Edit
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherTrash />}>
                      Delete
                    </DropdownMenu.DropdownItem>
                  </DropdownMenu>
                </SubframeCore.DropdownMenu.Content>
              </SubframeCore.DropdownMenu.Portal>
            </SubframeCore.DropdownMenu.Root>
          </div>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <span className="whitespace-nowrap text-body-bold font-body-bold text-neutral-700">
            Sarah Chandler
          </span>
        </Table.Cell>
        <Table.Cell>
          <span className="whitespace-nowrap text-body font-body text-neutral-500">
            [email protected]
          </span>
        </Table.Cell>
        <Table.Cell>
          <Badge variant="warning">Design</Badge>
        </Table.Cell>
        <Table.Cell>
          <div className="flex grow shrink-0 basis-0 items-center justify-end">
            <SubframeCore.DropdownMenu.Root>
              <SubframeCore.DropdownMenu.Trigger asChild={true}>
                <IconButton
                  size="medium"
                  icon={<FeatherMoreHorizontal />}
                  onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
                />
              </SubframeCore.DropdownMenu.Trigger>
              <SubframeCore.DropdownMenu.Portal>
                <SubframeCore.DropdownMenu.Content
                  side="bottom"
                  align="end"
                  sideOffset={8}
                  asChild={true}
                >
                  <DropdownMenu>
                    <DropdownMenu.DropdownItem icon={<FeatherStar />}>
                      Favorite
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherPlus />}>
                      Add
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherEdit2 />}>
                      Edit
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherTrash />}>
                      Delete
                    </DropdownMenu.DropdownItem>
                  </DropdownMenu>
                </SubframeCore.DropdownMenu.Content>
              </SubframeCore.DropdownMenu.Portal>
            </SubframeCore.DropdownMenu.Root>
          </div>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <span className="whitespace-nowrap text-body-bold font-body-bold text-neutral-700">
            Susan Best
          </span>
        </Table.Cell>
        <Table.Cell>
          <span className="whitespace-nowrap text-body font-body text-neutral-500">
            [email protected]
          </span>
        </Table.Cell>
        <Table.Cell>
          <Badge variant="success">Product</Badge>
        </Table.Cell>
        <Table.Cell>
          <div className="flex grow shrink-0 basis-0 items-center justify-end">
            <SubframeCore.DropdownMenu.Root>
              <SubframeCore.DropdownMenu.Trigger asChild={true}>
                <IconButton
                  size="medium"
                  icon={<FeatherMoreHorizontal />}
                  onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
                />
              </SubframeCore.DropdownMenu.Trigger>
              <SubframeCore.DropdownMenu.Portal>
                <SubframeCore.DropdownMenu.Content
                  side="bottom"
                  align="end"
                  sideOffset={8}
                  asChild={true}
                >
                  <DropdownMenu>
                    <DropdownMenu.DropdownItem icon={<FeatherStar />}>
                      Favorite
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherPlus />}>
                      Add
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherEdit2 />}>
                      Edit
                    </DropdownMenu.DropdownItem>
                    <DropdownMenu.DropdownItem icon={<FeatherTrash />}>
                      Delete
                    </DropdownMenu.DropdownItem>
                  </DropdownMenu>
                </SubframeCore.DropdownMenu.Content>
              </SubframeCore.DropdownMenu.Portal>
            </SubframeCore.DropdownMenu.Root>
          </div>
        </Table.Cell>
      </Table.Row>
    </Table>
  );
}

export default TableExample;

Props

Table Props
Cell Props
Header Cell Props
Header Row Props
Row Props
Prop
Type
Default value
Notes
header
React.ReactNode
—
children
React.ReactNode
—
Built in Subframe
ProductComponentsThemeTemplatesDocsPricing
CompanyBlogLinkedInX / TwitterGithub
ResourcesSlack communityHelp centerFor agenciesFor design systemsSubframe vs Figma