ListTableBlock

<ListTableBlock
  items={resources}
  columns={[
    columnHelpers.primary('name', 'Resource', {
      descriptionKey: 'description',
    }),
    columnHelpers.date('createdAt', 'Created'),
    columnHelpers.user('author', 'Author'),
  ]}
  density="expanded"
  onRowClick={(r) => `/resources/${r.id}`}
/>

// Server Component with URL-based sorting/pagination
export default async function Page({ searchParams }) {
  const { sort, dir = 'asc', page = '1' } = await searchParams;

  // Fetch and sort server-side
  const sorted = sortProjects(projects, sort, dir);
  const paginated = paginateProjects(sorted, parseInt(page));

  return (
    <ListTableBlock
      items={paginated}
      columns={columns}
      sortBy={sort}
      sortDirection={dir}
      currentPage={parseInt(page)}
      totalPages={Math.ceil(total / 10)}
      pageSize={10}
      totalItems={total}
    />
  );
}

const columns = [
  columnHelpers.text('name', 'Project'),
  columnHelpers.number('participants', 'Participants', {
    aggregation: 'sum',  // Shows total in footer
  }),
  columnHelpers.currency('budget', 'Budget', {
    aggregation: 'sum',  // Shows sum in footer
  }),
  columnHelpers.percentage('completion', 'Progress', {
    aggregation: 'average',  // Shows average in footer
  }),
];

<ListTableBlock
  items={projects}
  columns={columns}
  showColumnFooter
/>

<ListTableBlock
  items={projects}
  columns={columns}
  showRowNumbers
  rowNumberStart={1}  // Or offset for pagination
  currentPage={currentPage}
  pageSize={10}
/>

const groups = [
  {
    id: 'active',
    label: 'Active Projects',
    items: projects.filter(p => p.status === 'active'),
  },
  {
    id: 'completed',
    label: 'Completed Projects',
    items: projects.filter(p => p.status === 'completed'),
  },
];

<ListTableBlock
  items={[]}
  groups={groups}
  columns={columns}
/>