@dawood97/data-table

A polished React data table built on TanStack Table with self-contained CSS and no Tailwind dependency.

Install

npm install @dawood97/data-table

Then import the component and bundled stylesheet:

import DataTable from '@dawood97/data-table'
import '@dawood97/data-table/style.css'

Quick Setup

1. Install the package:

npm install @dawood97/data-table 

2. Import the component and styles:

import DataTable from '@dawood97/data-table'
import '@dawood97/data-table/style.css'

3. Render it with data and columns:

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
]

const data = [
  { id: 1, name: 'Ava Johnson', email: '[email protected]' },
  { id: 2, name: 'Noah Lee', email: '[email protected]' },
]

<DataTable
  data={data}
  columns={columns}
  enableSearch
  enableSorting
  enablePagination
/>

Quick Start

import { useMemo, useState } from 'react'
import DataTable from '@dawood97/data-table'
import '@dawood97/data-table/style.css'

const columns = [
  { accessorKey: 'id', header: 'ID', size: 64 },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
]

export default function UsersTable() {
  const data = useMemo(
    () => [
      { id: 1, name: 'Ava Johnson', email: '[email protected]' },
      { id: 2, name: 'Noah Lee', email: '[email protected]' },
    ],
    [],
  )
  const [selectedRows, setSelectedRows] = useState([])

  return (
    <DataTable
      data={data}
      columns={columns}
      enableSearch
      enableSorting
      enablePagination
      enableRowSelection
      onSelectedRowsChange={setSelectedRows}
      searchPlaceholder="Search users..."
    />
  )
}

Highlights

• Search, sorting, pagination, column filters, column visibility, and row selection.
• Clean default UI with responsive layout and accessible controls.
• Controlled or uncontrolled state support for search, sorting, filters, visibility, and selection.
• Self-contained CSS that works out of the box in consumer apps.

Props

Core

• data: row array.
• columns: TanStack column definitions.
• className: extra wrapper class names.
• toolbar: custom content rendered in the toolbar.
• emptyState: custom empty-state node.
• noResultsMessage: custom message when filters/search return nothing.
• noDataMessage: custom message when the dataset is empty.
• striped: alternate row backgrounds.
• getRowId: optional TanStack getRowId callback. Recommended for stable selection.

Feature Toggles

• enableSearch
• enableSorting
• enablePagination
• enableColumnFilters
• enableColumnVisibility
• enableRowSelection

Pagination

• initialPageSize
• pageSizeOptions

Search

• searchPlaceholder
• globalFilter
• onGlobalFilterChange

Controlled Table State

• sorting
• onSortingChange
• columnFilters
• onColumnFiltersChange
• columnVisibility
• onColumnVisibilityChange
• rowSelection
• onRowSelectionChange
• onSelectedRowsChange

Notes

• onRowSelectionChange returns the TanStack-style selection state object.
• onSelectedRowsChange returns the selected row records, which is usually the easiest API for app code.
• If you publish or consume this package in npm, keep react, react-dom, and `` installed in the app because they are peer dependencies.