const userColumns = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => (
      <div className="flex items-center gap-3">
        <Avatar src={row.original.avatar} alt={row.original.name} size="md" />
        <div>
          <p className="font-medium">{row.original.name}</p>
          <p className="text-sm text-muted-foreground">{row.original.username}</p>
        </div>
      </div>
    ),
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "role",
    header: "Role",
    cell: ({ getValue }) => (
      <Badge variant="secondary">{getValue() as string}</Badge>
    ),
  },
];

<Table data={usersData} columns={userColumns} size="md" />

const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

<Table
  data={usersData}
  columns={userColumns}
  enableRowSelection
  enableMultiRowSelection
  rowSelection={rowSelection}
  onRowSelectionChange={setRowSelection}
  size="md"
/>

const [sorting, setSorting] = useState<SortingState>([]);

<Table
  data={usersData}
  columns={userColumns}
  enableSorting
  sorting={sorting}
  onSortingChange={setSorting}
  size="md"
/>

const projectColumns = [
  projectColumnHelper.accessor("name", {
    header: "Project",
    cell: ({ getValue }) => (
      <div className="font-medium">{getValue()}</div>
    ),
  }),
  projectColumnHelper.accessor("status", {
    header: "Status",
    cell: ({ getValue }) => {
      const status = getValue();
      const config = {
        "Completed": { color: "success", icon: CheckCircle },
        "In Progress": { color: "warning", icon: Clock },
        "On Hold": { color: "gray", icon: XCircle },
        "Cancelled": { color: "error", icon: XCircle }
      };
      const { color, icon: Icon } = config[status];
      
      return (
        <div className="flex items-center gap-2">
          <Icon className="size-4" />
          <Badge color={color}>{status}</Badge>
        </div>
      );
    },
  }),
  projectColumnHelper.accessor("progress", {
    header: "Progress",
    cell: ({ getValue }) => {
      const progress = getValue();
      return (
        <div className="flex items-center gap-2">
          <div className="w-20 h-2 bg-gray-200 rounded-full overflow-hidden">
            <div 
              className="h-full bg-blue-500 rounded-full transition-all" 
              style={{ width: `${progress}%` }}
            />
          </div>
          <span className="text-sm text-muted-foreground">{progress}%</span>
        </div>
      );
    },
  }),
];

<TableCard
  title="Team members"
  badge="24 users"
  description="Manage your team members and their access levels"
  contentTrailing={
    <div className="flex gap-2">
      <Button variant="secondary" size="sm" leftIcon={<DownloadCloud01 />}>
        Download
      </Button>
      <Button size="sm" leftIcon={<Plus />}>
        Add member
      </Button>
    </div>
  }
>
  <Table
    data={usersData}
    columns={userColumns}
    enableRowSelection
    enableSorting
    size="md"
  />
</TableCard>

<Table
  data={usersData}
  columns={userColumns}
  alternatingRows={true}
  size="md"
/>

const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: 2,
});

<TableCard title="Invoices" badge="247 invoices">
  <Table
    data={invoicesData}
    columns={invoiceColumns}
    pagination={pagination}
    onPaginationChange={setPagination}
    size="md"
  />
  
  {/* Custom pagination footer */}
    
    <Pagination
      page={pagination.pageIndex + 1}
      total={Math.ceil(invoicesData.length / pagination.pageSize)}
      onPageChange={(page) => setPagination(prev => ({ 
        ...prev, 
        pageIndex: page - 1 
      }))}
    />

</TableCard>

<Table
  data={[]}
  columns={userColumns}
  emptyMessage={
    <div className="text-center py-12">
      <div className="mx-auto size-12 bg-gray-100 rounded-full flex items-center justify-center mb-4">
        <Users className="size-6 text-gray-400" />
      </div>
      <h3 className="font-medium text-gray-900 mb-1">No team members</h3>
      <p className="text-sm text-quaternary mb-4">
        Get started by adding your first team member.
      </p>
      <Button size="sm" leftIcon={<Plus />}>
        Add team member
      </Button>
    </div>
  }
  size="md"
/>

<Table data={usersData} columns={userColumns} size="sm" />
<Table data={usersData} columns={userColumns} size="md" />