DataTable

'use client'
import { useState } from 'react'

const DATA = [
  { id: 1, name: 'Alice Martin', role: 'Designer', status: 'Active', joined: '2024-01' },
  { id: 2, name: 'Bob Chen', role: 'Developer', status: 'Active', joined: '2024-03' },
  { id: 3, name: 'Carol White', role: 'Manager', status: 'Away', joined: '2023-11' },
  { id: 4, name: 'David Lee', role: 'Developer', status: 'Offline', joined: '2024-02' },
]

export default function DataTable({ data = DATA }) {
  const [selected, setSelected] = useState(new Set())
  const toggleAll = () => setSelected(s => s.size === data.length ? new Set() : new Set(data.map(d => d.id)))
  const toggle = (id) => setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n })
  const statusColor = { Active: '#10b981', Away: '#f59e0b', Offline: '#94a3b8' }
  return (
    <div style={{ background: '#fff', borderRadius: '14px', overflow: 'hidden', boxShadow: '0 2px 16px rgba(0,0,0,0.06)' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: '#f8fafc', borderBottom: '2px solid #f1f5f9' }}>
            <th style={{ padding: '12px 16px', width: '40px' }}>
              <input type="checkbox" checked={selected.size === data.length} onChange={toggleAll} />
            </th>
            {['Name','Role','Status','Joined'].map(h => (
              <th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '12px', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr key={row.id} style={{
              borderBottom: '1px solid #f1f5f9',
              background: selected.has(row.id) ? '#faf5ff' : '#fff',
            }}>
              <td style={{ padding: '12px 16px' }}>
                <input type="checkbox" checked={selected.has(row.id)} onChange={() => toggle(row.id)} />
              </td>
              <td style={{ padding: '12px 16px', fontWeight: 600, color: '#1e293b', fontSize: '14px' }}>{row.name}</td>
              <td style={{ padding: '12px 16px', color: '#64748b', fontSize: '14px' }}>{row.role}</td>
              <td style={{ padding: '12px 16px' }}>
                <span style={{
                  background: statusColor[row.status] + '20',
                  color: statusColor[row.status],
                  padding: '3px 10px', borderRadius: '9999px', fontSize: '12px', fontWeight: 600,
                }}>{row.status}</span>
              </td>
              <td style={{ padding: '12px 16px', color: '#94a3b8', fontSize: '13px' }}>{row.joined}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {selected.size > 0 && (
        <div style={{ padding: '12px 16px', background: '#faf5ff', fontSize: '13px', color: '#6d28d9', fontWeight: 500 }}>
          {selected.size} row{selected.size > 1 ? 's' : ''} selected
        </div>
      )}
    </div>
  )
}

Component info

About

Sortable data table with pagination and row selection