Park UI

Usage

Product Inventory
ID	Name	Stock	Price
P001	MacBook Pro	12	$1999.00
P002	AirPods Pro	25	$249.00
P003	Leather Wallet	50	$79.00
Totals		87	$34,163.00

size: md

variant

import * as Table from '~/components/ui/table'

export const Demo = (props: Table.RootProps) => {
  return (
    <Table.Root {...props}>
      <Table.Caption>Product Inventory</Table.Caption>
      <Table.Head>
        <Table.Row>
          <Table.Header>ID</Table.Header>
          <Table.Header>Name</Table.Header>
          <Table.Header>Stock</Table.Header>
          <Table.Header textAlign="right">Price</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {productData.map((product, index) => (
          <Table.Row key={index}>
            <Table.Cell fontWeight="medium">{product.id}</Table.Cell>
            <Table.Cell>{product.name}</Table.Cell>
            <Table.Cell>{product.stock}</Table.Cell>
            <Table.Cell textAlign="right">{product.price}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell colSpan={2}>Totals</Table.Cell>
          <Table.Cell>87</Table.Cell>
          <Table.Cell textAlign="right">$34,163.00</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  )
}

const productData = [
  { id: 'P001', name: 'MacBook Pro', stock: 12, price: '$1999.00' },
  { id: 'P002', name: 'AirPods Pro', stock: 25, price: '$249.00' },
  { id: 'P003', name: 'Leather Wallet', stock: 50, price: '$79.00' },
]

Installation

Insert code snippet into your project. Update import paths as needed.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'table',
    defaultVariants: { size: 'md', variant: 'plain' },
    slots: {
      root: 'table__root',
      body: 'table__body',
      cell: 'table__cell',
      footer: 'table__footer',
      head: 'table__head',
      header: 'table__header',
      row: 'table__row',
      caption: 'table__caption',
    },
    variants: {
      variant: {
        outline: {
          root: 'table__root--variant_outline',
          body: 'table__body--variant_outline',
          cell: 'table__cell--variant_outline',
          footer: 'table__footer--variant_outline',
          head: 'table__head--variant_outline',
          header: 'table__header--variant_outline',
          row: 'table__row--variant_outline',
          caption: 'table__caption--variant_outline',
        },
        plain: {
          root: 'table__root--variant_plain',
          body: 'table__body--variant_plain',
          cell: 'table__cell--variant_plain',
          footer: 'table__footer--variant_plain',
          head: 'table__head--variant_plain',
          header: 'table__header--variant_plain',
          row: 'table__row--variant_plain',
          caption: 'table__caption--variant_plain',
        },
      },
      size: {
        sm: {
          root: 'table__root--size_sm',
          body: 'table__body--size_sm',
          cell: 'table__cell--size_sm',
          footer: 'table__footer--size_sm',
          head: 'table__head--size_sm',
          header: 'table__header--size_sm',
          row: 'table__row--size_sm',
          caption: 'table__caption--size_sm',
        },
        md: {
          root: 'table__root--size_md',
          body: 'table__body--size_md',
          cell: 'table__cell--size_md',
          footer: 'table__footer--size_md',
          head: 'table__head--size_md',
          header: 'table__header--size_md',
          row: 'table__row--size_md',
          caption: 'table__caption--size_md',
        },
      },
    },
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(ark.table, 'root')
export const Body = withContext(ark.tbody, 'body')
export const Caption = withContext(ark.caption, 'caption')
export const Cell = withContext(ark.td, 'cell')
export const Footer = withContext(ark.tfoot, 'footer')
export const Head = withContext(ark.thead, 'head')
export const Header = withContext(ark.th, 'header')
export const Row = withContext(ark.tr, 'row')

export type RootProps = ComponentProps<typeof Root>
export interface BodyProps extends ComponentProps<typeof Body> {}
export interface CaptionProps extends ComponentProps<typeof Caption> {}
export interface CellProps extends ComponentProps<typeof Cell> {}
export interface FooterProps extends ComponentProps<typeof Footer> {}
export interface HeadProps extends ComponentProps<typeof Head> {}
export interface HeaderProps extends ComponentProps<typeof Header> {}
export interface RowProps extends ComponentProps<typeof Row> {}

import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'table',
    defaultVariants: { size: 'md', variant: 'plain' },
    slots: {
      root: 'table__root',
      body: 'table__body',
      cell: 'table__cell',
      footer: 'table__footer',
      head: 'table__head',
      header: 'table__header',
      row: 'table__row',
      caption: 'table__caption',
    },
    variants: {
      variant: {
        outline: {
          root: 'table__root--variant_outline',
          body: 'table__body--variant_outline',
          cell: 'table__cell--variant_outline',
          footer: 'table__footer--variant_outline',
          head: 'table__head--variant_outline',
          header: 'table__header--variant_outline',
          row: 'table__row--variant_outline',
          caption: 'table__caption--variant_outline',
        },
        plain: {
          root: 'table__root--variant_plain',
          body: 'table__body--variant_plain',
          cell: 'table__cell--variant_plain',
          footer: 'table__footer--variant_plain',
          head: 'table__head--variant_plain',
          header: 'table__header--variant_plain',
          row: 'table__row--variant_plain',
          caption: 'table__caption--variant_plain',
        },
      },
      size: {
        sm: {
          root: 'table__root--size_sm',
          body: 'table__body--size_sm',
          cell: 'table__cell--size_sm',
          footer: 'table__footer--size_sm',
          head: 'table__head--size_sm',
          header: 'table__header--size_sm',
          row: 'table__row--size_sm',
          caption: 'table__caption--size_sm',
        },
        md: {
          root: 'table__root--size_md',
          body: 'table__body--size_md',
          cell: 'table__cell--size_md',
          footer: 'table__footer--size_md',
          head: 'table__head--size_md',
          header: 'table__header--size_md',
          row: 'table__row--size_md',
          caption: 'table__caption--size_md',
        },
      },
    },
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(ark.table, 'root')
export const Body = withContext(ark.tbody, 'body')
export const Caption = withContext(ark.caption, 'caption')
export const Cell = withContext(ark.td, 'cell')
export const Footer = withContext(ark.tfoot, 'footer')
export const Head = withContext(ark.thead, 'head')
export const Header = withContext(ark.th, 'header')
export const Row = withContext(ark.tr, 'row')

export type RootProps = ComponentProps<typeof Root>
export interface BodyProps extends ComponentProps<typeof Body> {}
export interface CaptionProps extends ComponentProps<typeof Caption> {}
export interface CellProps extends ComponentProps<typeof Cell> {}
export interface FooterProps extends ComponentProps<typeof Footer> {}
export interface HeadProps extends ComponentProps<typeof Head> {}
export interface HeaderProps extends ComponentProps<typeof Header> {}
export interface RowProps extends ComponentProps<typeof Row> {}

Not yet available