GIA DataTable Component

A powerful and flexible React data table component built with TypeScript, TanStack Table v8, and styled-components. This component provides a rich set of features for displaying and manipulating tabular data.

Features

• 📊 Responsive Design

  • Horizontal scrolling for wide tables
  • Mobile-friendly layout
  • Flexible column sizing

• 🔍 Advanced Filtering

  • Select filters for categorical data
  • Number range filters with comparison operators
  • Date range filters with before/after/equals options
  • Custom filter functions support

• 🔄 Sorting

  • Multi-column sorting
  • Ascending/descending toggle
  • Visual indicators for sort direction
  • Server-side sorting support

• 📑 Pagination

  • Client-side pagination
  • Server-side pagination support
  • Customizable page size
  • First/last/next/previous navigation

• ✨ Column Management

  • Column visibility toggle
  • Column resizing
  • Custom column rendering
  • Nested data access (e.g., 'user.name')

• ✅ Row Selection

  • Single row selection
  • Multi-row selection
  • Selection callbacks
  • Disabled row selection support

Installation

npm install @tanstack/react-table styled-components
# or
yarn add @tanstack/react-table styled-components

Usage

import DataTable from './core/DataTable'
import { CustomColumnDef } from './types'

// Define your data type
interface User {
	id: string
	name: string
	email: string
	age: number
	joinDate: string
}

// Define your columns
const columns: CustomColumnDef<User>[] = [
	{
		id: 'name',
		header: 'Name',
		accessorKey: 'name',
		enableSorting: true,
	},
	{
		id: 'email',
		header: 'Email',
		accessorKey: 'email',
		filterType: 'select',
	},
	{
		id: 'age',
		header: 'Age',
		accessorKey: 'age',
		filterType: 'number-range',
	},
	{
		id: 'joinDate',
		header: 'Join Date',
		accessorKey: 'joinDate',
		filterType: 'date-range',
	},
]

// Use the component
function App() {
	const [data, setData] = useState<User[]>([])

	return (
		<DataTable
			data={data}
			columns={columns}
			enablePagination={true}
			enableFilters={true}
			enableColumnResizing={true}
			enableColumnVisibility={true}
			enableRowSelection={true}
			pageSize={10}
		/>
	)
}

Props

Core Props

| Prop | Type | Default | Description | | -------- | ------------------------ | -------- | ------------------------ | | data | TData[] | required | Array of data to display | | columns | CustomColumnDef[] | required | Column definitions | | pageSize | number | 10 | Number of rows per page |

Feature Flags

| Prop | Type | Default | Description | | ----------------------- | ------- | ------- | -------------------------- | | enableColumnVisibility | boolean | false | Enable column show/hide | | enablePagination | boolean | false | Enable pagination | | enableColumnResizing | boolean | false | Enable column resizing | | enableFilters | boolean | false | Enable column filters | | enableRowSelection | boolean | false | Enable row selection | | enableMultiRowSelection | boolean | true | Enable multi-row selection | | enableSorting | boolean | true | Enable column sorting |

Export Options

| Prop | Type | Default | Description | | -------------- | ------------------------------- | --------- | ------------------------------------------- | | isDownloadable | { formats: ('csv' | 'pdf')[] } | undefined | Enable export buttons for specified formats |

Server-side Props

| Prop | Type | Description | | ------------------ | -------- | ------------------------------- | | manualPagination | boolean | Enable server-side pagination | | pageCount | number | Total number of pages | | rowCount | number | Total number of rows | | onPaginationChange | function | Callback for pagination changes | | manualSorting | boolean | Enable server-side sorting | | onSortingChange | function | Callback for sort changes |

Selection Props

| Prop | Type | Description | | -------------------- | -------- | ------------------------------- | | onRowSelectionChange | function | Callback when selection changes | | onRowClick | function | Callback when row is clicked |

Column Definition

interface CustomColumnDef<TData> {
	id: string
	header: string | React.ReactNode
	accessorKey: keyof TData | string
	size?: number
	enableResizing?: boolean
	filterType?: 'select' | 'number-range' | 'date-range'
	filterFn?: FilterFnOption<TData>
	cell?: (info: any) => React.ReactNode
	enableSorting?: boolean
	hidden?: boolean // Hide column by default
}

Styling

The component uses styled-components and can be customized through the following styled components:

• TableWrapper
• StyledTable
• TableContainer
• TableHead
• TableBody
• TableRow
• TableHeaderCell
• TableCell
• FilterButton
• PaginationControls
• And more...

Examples

Server-side Pagination

function ServerSideTable() {
	const [data, setData] = useState<Data[]>([])
	const [isLoading, setIsLoading] = useState(false)

	const handlePaginationChange = async (newPagination) => {
		setIsLoading(true)
		const result = await fetchData(newPagination)
		setData(result.data)
		setIsLoading(false)
	}

	return (
		<DataTable
			data={data}
			columns={columns}
			manualPagination={true}
			pageCount={totalPages}
			rowCount={totalRows}
			onPaginationChange={handlePaginationChange}
		/>
	)
}

Custom Cell Rendering

const columns: CustomColumnDef<Data>[] = [
	{
		id: 'status',
		header: 'Status',
		accessorKey: 'status',
		cell: ({ row }) => <StatusBadge status={row.original.status}>{row.original.status}</StatusBadge>,
	},
]

Row Selection with Actions

function TableWithSelection() {
	const handleSelectionChange = (selection) => {
		const selectedRows = Object.keys(selection).filter((key) => selection[key])
		console.log('Selected rows:', selectedRows)
	}

	return (
		<DataTable
			data={data}
			columns={columns}
			enableRowSelection={true}
			enableMultiRowSelection={true}
			onRowSelectionChange={handleSelectionChange}
		/>
	)
}