Table

import { Table } from '@soft-ui/react/table'

export default function Example() {
  return (
    <Table.Root size="m">
      <Table.Header>
        <Table.Row isHeader>
          <Table.Head>Name</Table.Head>
          <Table.Head>Status</Table.Head>
          <Table.Head>Role</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>John Doe</Table.Cell>
          <Table.Cell>Active</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Root>
  )
}

<Table.Root size="s">...</Table.Root>
<Table.Root size="m">...</Table.Root>
<Table.Root size="l">...</Table.Root>
<Table.Root size="xl">...</Table.Root>

const [sortColumn, setSortColumn] = useState<string | null>(null)
const [sortDirection, setSortDirection] = useState<'asc' | 'desc' | null>(null)

const handleSort = (column: string) => {
  if (sortColumn === column) {
    setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
  } else {
    setSortColumn(column)
    setSortDirection('asc')
  }
}

<Table.Head 
  sortDirection={sortColumn === 'name' ? sortDirection : null}
  onSort={() => handleSort('name')}
>
  Name
</Table.Head>

const [selected, setSelected] = useState<string[]>([])

<Table.Row selected={selected.includes(row.id)}>
  <Table.CheckboxCell
    checked={selected.includes(row.id)}
    onCheckedChange={(checked) => {
      setSelected(checked 
        ? [...selected, row.id] 
        : selected.filter(id => id !== row.id)
      )
    }}
  />
  <Table.Cell>...</Table.Cell>
</Table.Row>

<Table.TextCell 
  prefix={<Table.Icon><RiUserLine /></Table.Icon>}
  additionalInfo="[email protected]"
  emphasized
>
  John Doe
</Table.TextCell>

<Table.NumberCell>1,234.56</Table.NumberCell>

<Table.BadgeCell variant="success" width="100px">
  Active
</Table.BadgeCell>

<Table.AvatarGroupCell 
  avatars={[
    { src: '/avatar1.jpg', initials: 'JD' },
    { src: '/avatar2.jpg', initials: 'AS' },
  ]}
  max={3}
/>

<Table.ProgressCell value={75} tone="success" />

<Table.ActionsCell>
  <Button variant="link-neutral" size="xs">Edit</Button>
  <IconButton variant="ghost" size="2xs">
    <RiMoreLine />
  </IconButton>
</Table.ActionsCell>

<Table.Root fixedLayout>
  <Table.Header>
    <Table.Row isHeader>
      <Table.Head style={{ width: '40%' }}>Name</Table.Head>
      <Table.Head style={{ width: '30%' }}>Status</Table.Head>
      <Table.Head style={{ width: '30%' }}>Role</Table.Head>
    </Table.Row>
  </Table.Header>
  ...
</Table.Root>