DataTable

Advanced data table component with sorting, filtering, pagination, and selection features for displaying tabular data efficiently.

Import

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

Basic Usage

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Active
Bob Johnson	bob@example.com	User	Inactive
Alice Brown	alice@example.com	Editor	Active
Charlie Wilson	charlie@example.com	User	Pending

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

const columns = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'email', header: 'Email', sortable: true },
  { key: 'role', header: 'Role', sortable: true },
  { key: 'status', header: 'Status', sortable: true },
]

<DataTable 
  data={data}
  columns={columns}
  pagination
  searchable
  selectable
/>

Features

🔍 Search & Filter

Built-in search functionality with customizable filters for each column.

🔄 Sorting

Multi-column sorting with ascending/descending order indicators.

📄 Pagination

Efficient pagination with customizable page sizes and navigation.

✅ Selection

Row selection with checkboxes and bulk action support.

Advanced Usage

Custom Cell Renderers

const columns = [
  { 
    key: 'name', 
    header: 'Name', 
    cell: (value, row) => (
      <div className="flex items-center">
        <img className="w-8 h-8 rounded-full mr-3" src={row.avatar} alt="" />
        <span className="font-medium">{value}</span>
      </div>
    )
  },
  { 
    key: 'status', 
    header: 'Status',
    cell: (value) => (
      <Badge variant={value === 'Active' ? 'success' : 'error'}>
        {value}
      </Badge>
    )
  },
  {
    key: 'actions',
    header: 'Actions',
    cell: (_, row) => (
      <div className="flex space-x-2">
        <Button size="sm" onClick={() => editUser(row.id)}>Edit</Button>
        <Button size="sm" variant="error" onClick={() => deleteUser(row.id)}>Delete</Button>
      </div>
    )
  }
]

Props

Prop	Type	Default	Description
data	Array<object>	[]	Array of data objects to display in the table
columns	Array<Column>	[]	Column configuration array
pagination	boolean	false	Enable pagination controls
searchable	boolean	false	Enable global search functionality
selectable	boolean	false	Enable row selection with checkboxes
pageSize	number	10	Number of rows per page when pagination is enabled
loading	boolean	false	Show loading state
onRowClick	function	-	Callback when a row is clicked

Example with Real Data

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

function UserTable() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchUsers()
  }, [])

  const fetchUsers = async () => {
    setLoading(true)
    const response = await fetch('/api/users')
    const data = await response.json()
    setUsers(data)
    setLoading(false)
  }

  const columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', sortable: true },
    { 
      key: 'role', 
      header: 'Role', 
      sortable: true,
      cell: (value) => (
        <Badge variant={value === 'admin' ? 'primary' : 'secondary'}>
          {value}
        </Badge>
      )
    },
    {
      key: 'actions',
      header: 'Actions',
      cell: (_, row) => (
        <div className="flex space-x-2">
          <Button size="sm" onClick={() => editUser(row.id)}>
            Edit
          </Button>
          <Button size="sm" variant="error" onClick={() => deleteUser(row.id)}>
            Delete
          </Button>
        </div>
      )
    }
  ]

  const handleRowClick = (row) => {
    console.log('Row clicked:', row)
  }

  const handleSelectionChange = (selectedRows) => {
    console.log('Selected rows:', selectedRows)
  }

  return (
    <DataTable
      data={users}
      columns={columns}
      loading={loading}
      pagination
      pageSize={20}
      searchable
      selectable
      onRowClick={handleRowClick}
      onSelectionChange={handleSelectionChange}
    />
  )
}