feat(components): add DataTable and DataTableColumnHeader components

src/components/dataTable.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/table';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  });
+
+  return (
+    <Table>
+      <TableHeader>
+        {table.getHeaderGroups().map(headerGroup => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map(header => {
+              return (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map(row => (
+            <TableRow
+              key={row.id}
+              data-state={row.getIsSelected() && 'selected'}
+            >
+              {row.getVisibleCells().map(cell => (
+                <TableCell
+                  key={cell.id}
+                  align={cell.column.columnDef.meta?.style?.textAlign}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="h-24 text-center">
+              No results.
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}

src/components/dataTableColumnHeader.tsx

@@ -0,0 +1,57 @@
+import type { Column } from '@tanstack/react-table';
+
+import { cn } from '@/utils/cn';
+import { Button } from '@/components/button';
+import { Icon } from '@/components/icon';
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn('flex items-center', className)}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-full gap-3 p-0 text-base font-medium md:text-md"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+      >
+        <span className="sr-only">Sort by</span>
+        <span>{title}</span>
+        {column.getIsSorted() === 'asc' ? (
+          <Icon
+            id={`icon-dropdown`}
+            sprite="/svg-sprites/icons.svg"
+            aria-label="Image representing descending sorting"
+            className="h-6 w-auto rotate-180 transform-gpu"
+          />
+        ) : column.getIsSorted() === 'desc' ? (
+          <Icon
+            id={`icon-dropdown`}
+            sprite="/svg-sprites/icons.svg"
+            aria-label="Image representing ascending sorting"
+            className="h-6 w-auto transform-gpu"
+          />
+        ) : (
+          <Icon
+            id={`icon-dropdown`}
+            sprite="/svg-sprites/icons.svg"
+            aria-label="Image representing ascending sorting"
+            className="h-6 w-auto transform-gpu opacity-25"
+          />
+        )}
+      </Button>
+    </div>
+  );
+}