add table

src/components/ui/table/table.stories.tsx

@@ -1,6 +1,19 @@
+import { useMemo, useState } from 'react'
+
 import { Meta } from '@storybook/react'
 
-import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeadCell, TableRow } from './'
+import {
+  Column,
+  Sort,
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeadCell,
+  TableHeader,
+  TableRow,
+} from './'
 
 import { Typography } from '@/components'
 
@@ -122,7 +135,89 @@ export const WithMapMethod = {
     ),
   },
 }
+const data2 = [
+  {
+    title: 'Project A',
+    cardsCount: 10,
+    updated: '2023-07-07',
+    createdBy: 'John Doe',
+  },
+  {
+    title: 'Project B',
+    cardsCount: 5,
+    updated: '2023-07-06',
+    createdBy: 'Jane Smith',
+  },
+  {
+    title: 'Project C',
+    cardsCount: 8,
+    updated: '2023-07-05',
+    createdBy: 'Alice Johnson',
+  },
+  {
+    title: 'Project D',
+    cardsCount: 3,
+    updated: '2023-07-07',
+    createdBy: 'Bob Anderson',
+  },
+  {
+    title: 'Project E',
+    cardsCount: 12,
+    updated: '2023-07-04',
+    createdBy: 'Emma Davis',
+  },
+]
 
+const columns: Array<Column> = [
+  {
+    key: 'name',
+    title: 'Name',
+    sortable: true,
+  },
+  {
+    key: 'cardsCount',
+    title: 'Cards',
+    sortable: true,
+  },
+  {
+    key: 'updated',
+    title: 'Last Updated',
+  },
+  {
+    key: 'createdBy',
+    title: 'Created by',
+  },
+]
+
+export const WithSort = {
+  render: () => {
+    const [sort, setSort] = useState<Sort>(null)
+    const sortedString = useMemo(() => {
+      if (!sort) return null
+
+      return `${sort.key}-${sort.direction}`
+    }, [sort])
+
+    console.log(sortedString)
+
+    return (
+      <table>
+        <TableHeader columns={columns} sort={sort} onSort={setSort} />
+        <tbody>
+          {data2.map(item => (
+            <tr key={item.title}>
+              <td>{item.title}</td>
+              <td>{item.cardsCount}</td>
+              <td>{item.updated}</td>
+              <td>{item.createdBy}</td>
+              <td>icons...</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
+  },
+}
 export const Empty = {
   render: () => <TableEmpty />,
 }

src/components/ui/table/table.tsx

@@ -20,7 +20,52 @@ export const TableHead = forwardRef<ElementRef<'thead'>, ComponentPropsWithoutRe
     return <thead {...rest} ref={ref} />
   }
 )
+export type Sort = {
+  key: string
+  direction: 'asc' | 'desc'
+} | null
 
+export type Column = {
+  key: string
+  title: string
+  sortable?: boolean
+}
+export const TableHeader: FC<
+  Omit<
+    ComponentPropsWithoutRef<'thead'> & {
+      columns: Column[]
+      sort?: Sort
+      onSort?: (sort: Sort) => void
+    },
+    'children'
+  >
+> = ({ columns, sort, onSort, ...restProps }) => {
+  const handleSort = (key: string, sortable?: boolean) => () => {
+    if (!onSort || !sortable) return
+
+    if (sort?.key !== key) return onSort({ key, direction: 'asc' })
+
+    if (sort.direction === 'desc') return onSort(null)
+
+    return onSort({
+      key,
+      direction: sort?.direction === 'asc' ? 'desc' : 'asc',
+    })
+  }
+
+  return (
+    <thead {...restProps}>
+      <tr>
+        {columns.map(({ title, key, sortable }) => (
+          <th key={key} onClick={handleSort(key, sortable)}>
+            {title}
+            {sort && sort.key === key && <span>{sort.direction === 'asc' ? '▲' : '▼'}</span>}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  )
+}
 export const TableBody = forwardRef<ElementRef<'tbody'>, ComponentPropsWithoutRef<'tbody'>>(
   ({ ...rest }, ref) => {
     return <tbody {...rest} ref={ref} />