Add manifest.json for graphify-out documentation with metadata for various files

assets/admin/components/ui/DataTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon, ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
 
 export interface Column<T> {
   key: string;
@@ -20,6 +20,9 @@ interface Props<T> {
   emptyMessage?: string;
   emptyAction?: React.ReactNode;
   headerExtra?: React.ReactNode;
+  sortKey?: string | null;
+  sortDir?: 'asc' | 'desc';
+  onSort?: (key: string) => void;
 }
 
 function SkeletonRow({ cols }: { cols: number }) {
@@ -45,6 +48,9 @@ export default function DataTable<T extends object>({
   emptyMessage = 'هیچ موردی یافت نشد',
   emptyAction,
   headerExtra,
+  sortKey,
+  sortDir,
+  onSort,
 }: Props<T>) {
   const allColumns = actions
     ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-[120px]' }]
@@ -74,11 +80,29 @@ export default function DataTable<T extends object>({
         <table className="t">
           <thead>
             <tr>
-              {allColumns.map((col) => (
-                <th key={col.key} className={col.className ?? ''}>
-                  {col.header}
-                </th>
-              ))}
+              {allColumns.map((col) => {
+                const sortable = (col as Column<T>).sortable && onSort;
+                const active = sortKey === col.key;
+                return (
+                  <th
+                    key={col.key}
+                    className={col.className ?? ''}
+                    onClick={sortable ? () => onSort!(col.key) : undefined}
+                    style={sortable ? { cursor: 'pointer', userSelect: 'none' } : undefined}
+                  >
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                      {col.header}
+                      {sortable && (
+                        active
+                          ? (sortDir === 'desc'
+                              ? <ChevronDownIcon style={{ width: 13, height: 13 }} />
+                              : <ChevronUpIcon style={{ width: 13, height: 13 }} />)
+                          : <ChevronUpDownIcon style={{ width: 13, height: 13, opacity: 0.4 }} />
+                      )}
+                    </span>
+                  </th>
+                );
+              })}
             </tr>
           </thead>
           <tbody>