DataTable - Data Table

Modern client-side data table component with sorting, filtering, pagination, and row selection. No automatic API calls - fully controlled by parent component.

🚀

DataTable Optimized - Client-Side Only

DataTable has been optimized to be client-side only for better performance and control.

✅ No automatic API calls - Parent component manages data
✅ Better performance with pure client-side processing
✅ Full control over data fetching and error handling
✅ Works offline and with any data source

📦

Import

import { DataTable } from '@akitectio/aki-ui'

🎮

Interactive Demo

Demo mode:

🔍 Show filters✅ Row selection🦓 Striped rows📏 Compact view

Name	Email	Role	Status
David Brown	david.brown@email.com	Admin	Pending
Jane Doe	jane.doe@email.com	User	Active
John Smith	john.smith@email.com	Admin	Active
Mike Johnson	mike.johnson@email.com	Editor	Inactive
Sarah Wilson	sarah.wilson@email.com	User	Active

Rows per page:Showing 1 to 5 of 5 entries

💡 Tip: Click on rows to view information, use checkboxes to change table settings

⭐

Key Features

🔍

Search & Filter

Global search and column-based filtering with high performance.

🔄

Smart Sorting

Multi-column sorting with custom sort functions.

📄

Flexible Pagination

Efficient pagination with customizable page sizes.

✅

Row Selection

Single and multi-row selection with batch operations.

🎨

UI Customization

Custom cell renderers and flexible styling options.

⚡

High Performance

Optimized for large datasets with virtualization.

🎯

Client-Side Data Management

How DataTable works now

DataTable is now purely client-side. You manage data in your component and pass it to DataTable.

import React, { useState, useEffect } from 'react'
import { DataTable } from '@akitectio/aki-ui'

function UserManagement() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)

  // You control when and how to fetch data
  const fetchUsers = async () => {
    setLoading(true)
    try {
      const response = await api.getUsers()
      setUsers(response.data) // Set data to DataTable
    } catch (error) {
      console.error('Error fetching users:', error)
      // Handle errors as needed
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchUsers() // Fetch on mount
  }, [])

  // DataTable handles all client-side operations
  return (
    <DataTable
      data={users}                  // Your data array
      columns={columns}             // Column definitions
      loading={loading}             // Loading state you control
      enablePagination={true}       // Client-side pagination
      showFilters={true}           // Client-side filtering
      sortable={true}              // Client-side sorting
      onRowClick={handleRowClick}  // Your event handlers
    />
  )
}

✅

Benefits:

• Full control over data fetching
• Better error handling
• Works with any API or data source
• No unexpected API calls
• Better performance

🚀

Basic Usage

1. Prepare data and columns

Create data array and define column structure:

import { DataTable } from '@akitectio/aki-ui'

// Sample data
const data = [
  { id: 1, name: 'John Smith', email: 'john@email.com', role: 'Admin' },
  { id: 2, name: 'Jane Doe', email: 'jane@email.com', role: 'User' },
  { id: 3, name: 'Mike Johnson', email: 'mike@email.com', role: 'Editor' }
]

// Define columns
const columns = [
  { 
    header: 'Name', 
    accessor: 'name', 
    sortable: true,
    width: '200px' 
  },
  { 
    header: 'Email', 
    accessor: 'email', 
    sortable: true 
  },
  { 
    header: 'Role', 
    accessor: 'role', 
    sortable: true 
  }
]

// Component
function MyTable() {
  return (
    <DataTable 
      data={data}
      columns={columns}
      enablePagination={true}
      selectable={true}
      striped={true}
      defaultPageSize={10}
    />
  )
}

🔥

Advanced Example

2. Custom cell renderers and actions

Customize data display and add actions:

const advancedColumns = [
  {
    header: 'Employee',
    accessor: 'name',
    cell: (value, row) => (
      <div className="flex items-center space-x-3">
        <img src={row.avatar} className="w-10 h-10 rounded-full" />
        <div>
          <div className="font-medium">{value}</div>
          <div className="text-sm text-gray-500">{row.email}</div>
        </div>
      </div>
    ),
    sortable: true
  },
  {
    header: 'Status',
    accessor: 'status',
    cell: (value) => (
      <span className={`px-2 py-1 rounded-full text-xs ${
        value === 'Active' 
          ? 'bg-green-100 text-green-800' 
          : 'bg-red-100 text-red-800'
      }`}>
        {value}
      </span>
    ),
    sortable: true
  },
  {
    header: 'Actions',
    accessor: 'actions',
    cell: (_, row) => (
      <div className="flex space-x-2">
        <button 
          className="px-2 py-1 bg-blue-500 text-white rounded text-xs"
          onClick={() => editUser(row.id)}
        >
          Edit
        </button>
        <button 
          className="px-2 py-1 bg-red-500 text-white rounded text-xs"
          onClick={() => deleteUser(row.id)}
        >
          Delete
        </button>
      </div>
    ),
    sortable: false
  }
]

📚

Properties (Props)

Property	Type	Default	Description
data	Array	[]	Data to display in the table
columns	Array	[]	Column structure definition
selectable	boolean	false	Enable row selection
striped	boolean	false	Display striped rows
enablePagination	boolean	false	Enable pagination feature
defaultPageSize	number	10	Default rows per page
showFilters	boolean	false	Show filter controls
loading	boolean	false	Display loading state

💡

Usage Tips

🚀 Performance

Use rowKey to help React optimize rendering when data changes.

🎨 Customization

Use cell function to create custom UI for each cell.

📱 Responsive

Set width for columns to make table display well on mobile.

⚡ Large Data

Enable pagination and use server-side filtering for datasets larger than 1000 records.