Data tables

<table className="w-full text-sm">
  <thead>
    <tr>
      <th className="text-left py-3 px-4 font-medium
        text-(--text-muted) border-b border-(--border)">
        Name
      </th>
      {/* ...more columns */}
    </tr>
  </thead>
  <tbody>
    {users.map(user => (
      <tr key={user.id} className="hover:bg-(--surface-hover)">
        <td className="py-3 px-4 text-(--text)
          border-b border-(--border)/40">
          {user.name}
        </td>
      </tr>
    ))}
  </tbody>
</table>

const [sortColumn, setSortColumn] = useState('name');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

const sorted = useMemo(() =>
  [...users].sort((a, b) => {
    const cmp = a[sortColumn].localeCompare(b[sortColumn]);
    return sortDirection === 'asc' ? cmp : -cmp;
  }), [sortColumn, sortDirection]
);

<th onClick={() => handleSort('name')}
    className="cursor-pointer select-none">
  Name {sortColumn === 'name' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>

const [query, setQuery] = useState('');

const filtered = useMemo(() => {
  if (!query.trim()) return users;
  const q = query.toLowerCase();
  return users.filter(u =>
    u.name.toLowerCase().includes(q) ||
    u.email.toLowerCase().includes(q)
  );
}, [query]);

<input
  type="text"
  placeholder="Search..."
  value={query}
  onChange={e => setQuery(e.target.value)}
  className="..."
/>

const [page, setPage] = useState(1);
const pageSize = 10;
const totalPages = Math.ceil(data.length / pageSize);

const pageData = useMemo(() => {
  const start = (page - 1) * pageSize;
  return data.slice(start, start + pageSize);
}, [page, data]);

<div className="flex items-center gap-1">
  <button onClick={() => setPage(p => Math.max(1, p - 1))}
    disabled={page === 1}>Prev</button>
  {Array.from({ length: totalPages }, (_, i) => (
    <button key={i} onClick={() => setPage(i + 1)}
      className={page === i + 1 ? 'bg-brand-500 text-white' : ''}>
      {i + 1}
    </button>
  ))}
  <button onClick={() => setPage(p => Math.min(totalPages, p + 1))}
    disabled={page === totalPages}>Next</button>
</div>

const [selected, setSelected] = useState<Set<number>>(new Set());

function toggleAll() {
  if (selected.size === data.length) setSelected(new Set());
  else setSelected(new Set(data.map(d => d.id)));
}

function toggle(id: number) {
  setSelected(prev => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });
}

<th>
  <input type="checkbox"
    checked={selected.size === data.length}
    onChange={toggleAll} />
</th>
// ...
<td>
  <input type="checkbox"
    checked={selected.has(row.id)}
    onChange={() => toggle(row.id)} />
</td>

const statusStyles = {
  Active:   'bg-success-500/10 text-success-500 border-success-500/20',
  Inactive: 'bg-neutral-500/10 text-neutral-400 border-neutral-500/20',
  Pending:  'bg-warn-500/10 text-warn-500 border-warn-500/20',
};

function StatusBadge({ status }: { status: string }) {
  return (
    <span className={`inline-flex items-center gap-1.5
      px-2.5 py-0.5 text-[10px] font-semibold rounded-lg
      border ${statusStyles[status]}`}>
      <span className="w-1.5 h-1.5 rounded-full bg-current" />
      {status}
    </span>
  );
}

import { Table, TableRowActions, type TableColumn } from '@/components/aidash/table';

const columns = [
  { key: 'name', header: 'Name' },
  { key: 'email', header: 'Email' },
  { key: 'role', header: 'Role' },
  { key: 'department', header: 'Department' },
  {
    key: 'actions',
    header: 'Actions',
    align: 'right',
    width: '72px',
    sticky: 'right',        // pinned while the table scrolls sideways
    render: (_value, row) => (
      <TableRowActions
        label={`Actions for ${row.name}`}
        items={[
          { label: 'Edit', icon: <HugeiconsIcon icon={PencilEdit01Icon} size={14} />, onClick: () => onEdit(row) },
          { label: 'Duplicate', icon: <HugeiconsIcon icon={Copy01Icon} size={14} />, onClick: () => onDuplicate(row) },
          { separator: true, label: '' },
          { label: 'Delete', icon: <HugeiconsIcon icon={Delete01Icon} size={14} />, danger: true, onClick: () => onDelete(row) },
        ]}
      />
    ),
  },
];

<Table columns={columns} data={users} />

{/* Approach 1: Horizontal scroll */}
<div className="overflow-x-auto">
  <table className="w-full min-w-[600px]">
    {/* normal table markup */}
  </table>
</div>

{/* Approach 2: Cards on mobile */}
<div className="hidden md:block">
  <table>{/* normal table */}</table>
</div>
<div className="md:hidden space-y-3">
  {data.map(row => (
    <div key={row.id} className="rounded-xl border p-4">
      <div className="flex justify-between">
        <span className="font-medium">{row.name}</span>
        <StatusBadge status={row.status} />
      </div>
      <div className="grid grid-cols-2 gap-2 text-xs mt-2">
        <div>
          <span className="text-muted">Email</span>
          <p>{row.email}</p>
        </div>
      </div>
    </div>
  ))}
</div>