smart-table

Composable React table primitives for teams that want table state and behavior without adopting a rigid renderer.

Installation

npm install smart-table-saurav475

yarn add smart-table-saurav475

What It Provides

• TableProvider to hold table state
• Table plus minimal Header, Row, Cell, and StickyHeader primitives
• useSort, useFilter, useColumnResize, useVirtualRows, and useResponsiveCollapse
• Prop-based class hooks so Bootstrap, Tailwind, or custom classes can be applied directly

Quick Start

import { Table, TableProvider, type Column } from 'smart-table-saurav475'

type User = {
  name: string
  email: string
}

const data: User[] = [{ name: 'Alice', email: '[email protected]' }]

const columns: Column<User>[] = [
  {
    id: 'name',
    header: 'Name',
    accessor: (row) => row.name,
    sortable: true,
    filterable: true
  },
  {
    id: 'email',
    header: 'Email',
    accessor: (row) => row.email
  }
]

export default function App() {
  return (
    <TableProvider data={data} columns={columns}>
      <Table />
    </TableProvider>
  )
}

Styling With Bootstrap Or Tailwind

You can pass classes through props instead of being locked into built-in styling:

<Table
  className="table table-striped"
  headerClassName="sticky-top"
  headerRowClassName="bg-light border-bottom"
  rowClassName={(_, rowIndex) => `align-middle row-${rowIndex}`}
  headerCellClassName={(column) => `px-3 py-2 ${column.id}-header`}
  cellClassName={(column) => `px-3 py-2 ${column.id}-cell`}
/>

Columns can also define:

• className
• headerClassName
• cellClassName

Core API

TableProvider

<TableProvider data={rows} columns={columns}>
  <Table />
</TableProvider>

Column<T>

type Column<T> = {
  id: string
  header: React.ReactNode
  accessor: (row: T) => unknown
  width?: number
  minWidth?: number
  maxWidth?: number
  sortable?: boolean
  filterable?: boolean
  filterMode?: 'includes' | 'equals'
  className?: string
  headerClassName?: string
  cellClassName?: string
}

Table Props

• className
• headerClassName
• headerRowClassName
• bodyClassName
• rowClassName
• headerCellClassName
• cellClassName
• stickyHeader
• renderHeaderCell
• renderCell

Hooks

useSort

const { sortBy, clearSort, sortState } = useSort()

useFilter

const { filters, setFilter, removeFilter, clearFilters } = useFilter()

useColumnResize

const { resizeColumn, columnWidths } = useColumnResize()

useVirtualRows

const visibleRows = useVirtualRows(rows, startIndex, endIndex)

useResponsiveCollapse

const collapsed = useResponsiveCollapse(768)

Build

npm run build

npm run build:webpack

Test

npm test

License

MIT

Links

• Repository: https://github.com/saurav475/smart-table
• Issues: https://github.com/saurav475/smart-table/issues