feat(shadcn): add column scrolling to DataTable component

  ## what
  - add column scrolling to `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#sorting

  ## why
  - allows a column to be sorted

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage

src/components/ui/data-table.tsx

@@ -1,10 +1,13 @@
 "use client"
 
+import { useState } from "react"
 import {
   ColumnDef,
+  SortingState,
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 
@@ -27,11 +30,18 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([])
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
   })
 
   return (