gia-data-table v2.0.7

GIA DataTable

A modern, feature-rich data table component for React applications built with TypeScript, styled-components, and Radix UI primitives.

Features

• 📊 Dynamic Column Management

  • Drag-and-drop column reordering
  • Column visibility toggling
  • Resizable columns
  • Column builder interface
  • Custom column rendering

• 🔍 Advanced Filtering

  • String filters with searchable dropdown
  • Numeric filters with conditions (>, <, =, ≠)
  • Date filters with conditions (before, after, equal, not equal)
  • Global search across visible columns
  • Multiple active filters
  • Custom filter functions

• 📱 Responsive Design

  • Mobile-friendly interface
  • Adaptive layout
  • Touch-friendly controls
  • Striped rows option

• 🔄 Sorting

  • Single column sorting
  • Ascending/descending toggle
  • Visual indicators for sort state

• 📥 Export Options

  • PDF export with formatting
  • CSV export
  • Custom filename support

Installation

npm install gia-data-table
# or
yarn add gia-data-table

Usage

Basic Example

import { DataTable } from 'gia-data-table'

function MyComponent() {
	const data = [
		{ id: 1, name: 'John Doe', age: 30, city: 'New York' },
		{ id: 2, name: 'Jane Smith', age: 25, city: 'London' },
		// ...more data
	]

	const columns = [
		{ key: 'name', label: 'Name' },
		{ key: 'age', label: 'Age', filter: 'numeric' },
		{ key: 'city', label: 'City' },
	]

	return <DataTable data={data} columns={columns} isSearchEnabled isFilterEnabled isBuilderModeEnabled />
}

Advanced Example with Custom Rendering

import { DataTable } from 'gia-datatable'

function AdvancedExample() {
	const data = [
		{
			id: 1,
			name: 'John Doe',
			age: 30,
			salary: 50000,
			city: 'New York',
			joinDate: '2023-01-15',
			status: 'active',
		},
		// ...more data
	]

	const columns = [
		{
			key: 'name',
			label: 'Name',
			filter: true, // String filter by default
		},
		{
			key: 'age',
			label: 'Age',
			filter: 'numeric', // Numeric filter
		},
		{
			key: 'salary',
			label: 'Salary',
			filter: 'numeric',
			render: ({ value }) => `$${value.toLocaleString()}`,
		},
		{
			key: 'joinDate',
			label: 'Join Date',
			filter: 'date',
			dateFormat: 'DD/MM/YYYY', // Custom date format
		},
		{
			key: 'status',
			label: 'Status',
			render: ({ value }) => <span className={`status-badge ${value}`}>{value.charAt(0).toUpperCase() + value.slice(1)}</span>,
		},
	]

	return (
		<DataTable
			data={data}
			columns={columns}
			isSearchEnabled
			isFilterEnabled
			isBuilderModeEnabled
			isStriped
			isPaginationEnabled
			pageSize={10}
			isDownloadable={{
				formats: ['pdf', 'csv'],
			}}
		/>
	)
}

Props

Column Type

type Column = {
	key: string
	label: string
	isVisible?: boolean
	width?: number
	filter?: boolean | 'numeric' | 'date' | ((value: any) => any)
	dateFormat?: string // Format for date display and filtering (e.g., 'DD/MM/YYYY')
	render?: ({ row, value }: { row: Record<string, any>; value: any }) => React.ReactNode
}

Download Options

type DownloadOptions = {
	formats: Array<'csv' | 'pdf'>
}

Features in Detail

Column Management

• Click the "Builder" button to open the column management interface
• Drag and drop columns to reorder them
• Toggle column visibility using checkboxes
• Resize columns by dragging the divider between them
• Changes are applied immediately

Filtering

• String columns: Click the filter icon to open a searchable dropdown of unique values
• Numeric columns: Click the filter icon to set conditions (>, <, =, ≠)
• Date columns: Click the filter icon to set conditions (before, after, equal, not equal)
• Custom filter functions: Provide a function to transform values before filtering
• Multiple filters can be active simultaneously
• Filters are combined with AND logic

Custom Rendering

• Use the render prop to customize cell content
• Access both the cell value and entire row data
• Perfect for formatting, styling, or adding interactive elements
• Commonly used for:
  • Currency formatting
  • Date formatting
  • Status badges
  • Action buttons
  • Links

Sorting

• Click the column options (⋮) to access sort controls
• Choose between ascending and descending order
• Active sort is indicated with an arrow icon
• Works with custom rendered columns

Pagination

• Enable with isPaginationEnabled
• Configure rows per page with pageSize
• Includes page navigation controls
• Shows current page info and total entries

Exporting

• Click the "Download" button to access export options
• PDF export includes formatting and styling
• Custom filename support for both PDF and CSV
• Exports reflect current:
  • Filtered data
  • Visible columns
  • Column order
  • Custom rendering