@globalicons/enterprise-tools v3.2.0

GIA DataTable

A modern, feature-rich data table component built with React, TypeScript, and Tailwind CSS. This component provides a flexible and customizable solution for displaying and managing tabular data in your applications.

Features

• 📊 Pagination: Server-side and client-side pagination support
• 🔄 Loading States: Skeleton loading with dynamic column support
• 📦 Export Options: CSV and PDF export with customizable formatting
• 🎯 Column Management: Show/hide columns with persistent visibility
• 📊 Data Formatting: Built-in support for various data types and formats
• 🔄 State Management: Efficient state handling with React hooks
• 🎯 Accessibility: ARIA attributes and keyboard navigation support
• 📏 Column Resizing: Drag to resize columns
• ✅ Row Selection: Single and multi-row selection support

Installation

npm install @globalicons/enterprise-tools
# or
yarn add @globalicons/enterprise-tools

Usage

TypeScript Usage

import { DataTable } from '@globalicons/enterprise-tools'

interface User {
	id: number
	name: string
	email: string
	role: string
	age: number
	joinDate: string
}

const columns = [
	{
		id: 'id',
		accessorKey: 'id',
		header: 'ID',
		size: 80,
		enableResizing: true,
		filterType: 'number-range',
	},
	{
		id: 'name',
		accessorKey: 'name',
		header: 'Name',
		size: 200,
		enableResizing: true,
		filterType: 'select',
	},
	{
		id: 'email',
		accessorKey: 'email',
		header: 'Email',
		size: 250,
		enableResizing: true,
	},
	{
		id: 'role',
		accessorKey: 'role',
		header: 'Role',
		size: 150,
		enableResizing: true,
		filterType: 'select',
	},
	{
		id: 'age',
		accessorKey: 'age',
		header: 'Age',
		size: 100,
		enableResizing: true,
		filterType: 'number-range',
	},
	{
		id: 'joinDate',
		accessorKey: 'joinDate',
		header: 'Join Date',
		size: 150,
		enableResizing: true,
		filterType: 'date-range',
		cell: (info) => new Date(info.getValue()).toLocaleDateString(),
	},
]

const data = [
	{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', age: 30, joinDate: '2023-01-15' },
	{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', age: 25, joinDate: '2023-02-20' },
]

function App() {
	return (
		<DataTable<User>
			data={data}
			columns={columns}
			enablePagination
			enableFilters
			enableColumnVisibility
			enableColumnResizing
			enableRowSelection
			enableMultiRowSelection
			theme='default'
			pageSize={10}
			onRowSelectionChange={(selection) => console.log('Selected rows:', selection)}
			onRowClick={(row) => console.log('Clicked row:', row)}
		/>
	)
}

JavaScript Usage

import { DataTable } from '@globalicons/enterprise-tools'

const columns = [
	{
		id: 'id',
		accessorKey: 'id',
		header: 'ID',
		size: 80,
		enableResizing: true,
		filterType: 'number-range',
	},
	{
		id: 'name',
		accessorKey: 'name',
		header: 'Name',
		size: 200,
		enableResizing: true,
		filterType: 'select',
	},
	{
		id: 'email',
		accessorKey: 'email',
		header: 'Email',
		size: 250,
		enableResizing: true,
	},
	{
		id: 'role',
		accessorKey: 'role',
		header: 'Role',
		size: 150,
		enableResizing: true,
		filterType: 'select',
	},
]

const data = [
	{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
	{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
]

function App() {
	return (
		<DataTable
			data={data}
			columns={columns}
			enablePagination
			enableFilters
			enableColumnVisibility
			enableColumnResizing
			enableRowSelection
			enableMultiRowSelection
			theme='nss'
			pageSize={10}
			onRowSelectionChange={(selection) => console.log('Selected rows:', selection)}
			onRowClick={(row) => console.log('Clicked row:', row)}
		/>
	)
}

Props

Core Props

Pagination Props

Column Management Props

Filtering Props

Row Selection Props

Sorting Props

Export Props

Column Definition

interface CustomColumnDef<T> {
	// Required properties
	id: string
	accessorKey: keyof T
	header: string

	// Optional properties
	cell?: (info: { getValue: () => any }) => React.ReactNode
	size?: number
	enableResizing?: boolean
	enableSorting?: boolean
	enableHiding?: boolean
	hidden?: boolean
	filterType?: 'select' | 'number-range' | 'date-range'
}

Filter Types

1. Select Filter

   • For categorical data
   • Shows a dropdown with unique values
   • Supports multiple selection
   • Example: filterType: 'select'

2. Number Range Filter

   • For numerical data
   • Supports range and comparison operators
   • Options:
     • Range: min/max values
     • Greater than
     • Greater than or equal
     • Less than
     • Less than or equal
     • Equals
   • Example: filterType: 'number-range'

3. Date Range Filter

   • For date data
   • Supports range and comparison operators
   • Options:
     • Range: from/to dates
     • Before
     • After
     • Equals
   • Example: filterType: 'date-range'

Pagination Modes

Client-Side Pagination

<DataTable data={data} columns={columns} enablePagination pageSize={10} />

Server-Side Pagination

<DataTable
	data={data}
	columns={columns}
	enablePagination
	manualPagination
	pageCount={totalPages}
	rowCount={totalRows}
	onPaginationChange={(pagination) => {
		// Fetch new data based on pagination.pageIndex and pagination.pageSize
	}}
/>

Export Options

CSV Export

• Includes all visible columns
• Properly formatted data with headers
• Handles special characters and line breaks
• Filename format: file_YYYY_MM_DD.csv

PDF Export

• A0 size in landscape orientation for maximum space
• Full content display without truncation
• Theme-based styling
• Proper margins and spacing
• Filename format: file_YYYY_MM_DD.pdf