# Vexlora Advanced DataTable

Milestone 8 introduces a reusable, frontend-only data grid system powered by **TanStack React Table v9.1.2** and styled entirely with Vexlora Tailwind utilities and semantic tokens.

## Architecture

```text
Feature page
  -> domain column definitions
  -> shared DataTable
  -> TanStack Table v9 feature engine
  -> Vexlora Table/UI primitives
  -> typed mock or REST-ready data provider
```

TanStack Table remains headless. It owns table state and row/column models; Vexlora owns markup, accessibility composition, responsive behavior and styling.

## v9-native setup

Vexlora uses the current v9 architecture rather than the deprecated v8-style compatibility hook:

- `useTable`
- `tableFeatures`
- explicit tree-shakeable feature registration
- `createFilteredRowModel`
- `createSortedRowModel`
- `createPaginatedRowModel`
- `createExpandedRowModel`
- registered `includesString` and `equalsString` filter functions
- registered text, alphanumeric, numeric/basic and datetime sort functions
- reactive state reads through `table.state`
- v9 `table.FlexRender` for header/cell rendering

The shared feature object lives in `src/components/data-table/table-features.ts` so every domain table uses the same behavior contract.

## Included behavior

- Global text search
- Domain filter dropdowns
- Ascending / descending sorting
- Column visibility
- Current-page row selection
- Bulk-action slot
- Expandable detail rows
- Sticky table header
- Pagination and page-size control
- Responsive mobile-card renderer
- Loading skeletons
- Empty state
- Error state
- CSV export helper
- Domain-owned row action menus
- Stable data references passed to `useTable`

## Domain separation

Customer and Product tables do not define table infrastructure. Each feature only owns:

- its `ColumnDef` definitions
- its filter options
- its mobile row composition
- its detail expansion composition
- its domain actions

This keeps Orders, Users, CRM, Finance and future modules free to reuse the same table engine.

## Styling rules

The DataTable follows the existing Vexlora contract:

- no CSS Modules
- no Sass/Less
- no inline style objects
- no arbitrary hex colors
- no arbitrary pixel typography
- shared `rounded-lg`, `border-border`, semantic status colors and standard control heights

## Backend boundary

The table does not import Prisma, database clients or API SDKs. Data enters through props after being obtained from the Milestone 7 provider/repository layer. A ThemeForest buyer can therefore replace mock repositories with REST without changing the DataTable component.

## Future extensions

Later business milestones can add server-controlled pagination/sorting, URL-synced filters, import workflows, saved views, column pinning and optional column resizing without changing the base visual contract.