@juncore/core-table

Hai component cho data display: Table (primitive HTML-style) và TableView (full-featured với search, filter, sort, pagination, multi-view).

Cài đặt

yarn add @juncore/core-table @juncore/core-ui

Yêu cầu @juncore/core-ui (dùng cn util) và @juncore/core-theme (ThemeProvider ở root app).

Table — HTML-style primitive

Dùng khi cần full control layout bảng. Các sub-component tự nhận props từ Table cha qua React.cloneElement.

import { Table, TableThead, TableTbody, TableTr, TableTh, TableTd } from '@juncore/core-table';

<Table striped highlightOnHover spacing="sm">
  <TableThead>
    <TableTr>
      <TableTh>Tên</TableTh>
      <TableTh>Email</TableTh>
      <TableTh>Vai trò</TableTh>
    </TableTr>
  </TableThead>
  <TableTbody>
    {rows.map(row => (
      <TableTr key={row.id}>
        <TableTd>{row.name}</TableTd>
        <TableTd>{row.email}</TableTd>
        <TableTd>{row.role}</TableTd>
      </TableTr>
    ))}
  </TableTbody>
</Table>

Table props

| Prop | Type | Default | Mô tả | |------|------|---------|-------| | striped | boolean | false | Tô màu xen kẽ các hàng | | highlightOnHover | boolean | true | Hover highlight | | withTableBorder | boolean | true | Viền ngoài bảng | | withColumnBorders | boolean | false | Đường kẻ dọc giữa cột | | withRowBorders | boolean | true | Đường kẻ ngang giữa hàng | | spacing | 'xs' \| 'sm' \| 'md' \| 'lg' | 'sm' | Padding cell |

spacing map

| Value | Cell padding | |-------|-------------| | xs | py-1 px-2 | | sm | py-2 px-3 | | md | py-3 px-4 | | lg | py-4 px-5 |

Sub-components

• TableThead — <thead> với uppercase tracking header style
• TableTbody — <tbody> với divide-y
• TableTr — <tr> nhận striped, highlightOnHover (inject tự động từ Table)
• TableTh — <th> nhận spacing, withColumnBorders
• TableTd — <td> nhận spacing, withColumnBorders

Table tự inject spacing, striped, highlightOnHover, withColumnBorders, withRowBorders xuống các TableThead/TableTbody con — không cần pass thủ công.

TableView — Full-featured data table

Component hoàn chỉnh: search, filter dropdown, sort, pagination, 3 view modes (table / grid / list). Phù hợp cho admin pages, danh sách CRUD.

import { TableView, TableColumn } from '@juncore/core-table';

const columns: TableColumn[] = [
  { key: 'name', header: 'Tên', sortable: true },
  { key: 'email', header: 'Email' },
  {
    key: 'status',
    header: 'Trạng thái',
    render: (row) => <Badge variant={row.status === 'active' ? 'success' : 'neutral'}>{row.status}</Badge>
  },
  {
    key: 'actions',
    header: '',
    sortable: false,
    render: (row) => <Button size="sm" onClick={() => edit(row)}>Sửa</Button>
  }
];

<TableView
  columns={columns}
  data={users}
  itemsPerPage={15}
  searchKeys={['name', 'email']}
  searchPlaceholder="Tìm theo tên hoặc email..."
  onRowClick={(row) => navigate(`/users/${row.id}`)}
/>

TableView props

| Prop | Type | Default | Mô tả | |------|------|---------|-------| | columns | TableColumn[] | — | Định nghĩa cột | | data | any[] | — | Dữ liệu | | itemsPerPage | number | 10 | Số dòng mỗi trang | | searchKeys | string[] | tất cả keys | Các field dùng để search | | searchPlaceholder | string | 'Tìm kiếm...' | | | filters | TableViewFilter[] | [] | Dropdown filter definitions | | enableViewModes | boolean | true | Hiện nút toggle table/grid/list | | defaultViewMode | 'table' \| 'grid' \| 'list' | 'table' | | | renderGridItem | (row) => ReactNode | auto card | Custom card cho grid mode | | renderListItem | (row) => ReactNode | auto list item | Custom item cho list mode | | onRowClick | (row) => void | — | Click vào hàng | | hideControls | boolean | false | Ẩn search + filter bar | | hidePagination | boolean | false | Ẩn pagination | | className | string | '' | |

TableColumn

interface TableColumn {
  key: string;           // field name trong data object
  header: string;        // tiêu đề cột
  sortable?: boolean;    // default true — set false để tắt sort cột này
  render?: (row: any) => React.ReactNode; // custom cell renderer
}

TableViewFilter — dropdown filter

const filters: TableViewFilter[] = [
  {
    key: 'status',
    label: 'Trạng thái',
    options: [
      { value: 'active', label: 'Đang hoạt động' },
      { value: 'inactive', label: 'Không hoạt động' }
    ]
  },
  {
    key: 'role',
    label: 'Vai trò',
    options: [
      { value: 'admin', label: 'Admin' },
      { value: 'member', label: 'Member' }
    ]
  }
];

<TableView columns={columns} data={data} filters={filters} />

Filter match exact (case-insensitive) theo row[filter.key].

Custom grid / list renderer

<TableView
  columns={columns}
  data={apps}
  defaultViewMode="grid"
  renderGridItem={(row) => (
    <Card hover>
      <Text weight="bold">{row.name}</Text>
      <Badge>{row.status}</Badge>
    </Card>
  )}
  renderListItem={(row) => (
    <div className="flex justify-between p-3">
      <Text>{row.name}</Text>
      <Badge>{row.version}</Badge>
    </div>
  )}
/>

Nếu không truyền renderGridItem / renderListItem, component tự generate card/list item mặc định dựa trên row.title || row.name || row.email.

Sort

• Mặc định tất cả cột sortable: true.
• Click header để sort asc, click lại để desc.
• Sort tự handle string (lowercase), number, null/undefined (null về cuối).

Pagination

• Hiển thị "Trang X / Y • Khớp N / total dòng"
• Tự reset về trang 1 khi search/filter thay đổi.

Types export

import type { TableColumn, TableViewFilter, TableViewProps, TableProps } from '@juncore/core-table';