Project Initialization

packages/ui-common/src/components/Table/Table.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+export interface TableColumn<T> {
+  key: string;
+  header: string;
+  render?: (row: T) => ReactNode;
+  width?: string;
+}
+
+export interface TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  rowKey: (row: T) => string;
+  emptyMessage?: string;
+}
+
+function Table<T>({ columns, data, rowKey, emptyMessage = 'No data' }: TableProps<T>) {
+  return (
+    <div className="overflow-x-auto rounded-md border border-gray-200">
+      <table className="min-w-full divide-y divide-gray-200 text-sm">
+        <thead className="bg-gray-50">
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                style={column.width ? { width: column.width } : undefined}
+                className="px-4 py-2 text-left font-medium text-gray-700"
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 bg-white">
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="px-4 py-6 text-center text-gray-500">
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            data.map((row) => (
+              <tr key={rowKey(row)} className="hover:bg-gray-50">
+                {columns.map((column) => (
+                  <td key={column.key} className="px-4 py-2 text-gray-900">
+                    {column.render
+                      ? column.render(row)
+                      : ((row as unknown as Record<string, ReactNode>)[column.key] ?? '-')}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

packages/ui-common/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export type { TableProps, TableColumn } from './Table';