feat: integrate react-table in directory view

frontend/app/element/directorytable.less

@@ -0,0 +1,18 @@
+.dir-table {
+    .dir-table-head {
+        .dir-table-head-row {
+            .dir-table-head-cell {
+            }
+        }
+    }
+
+    .dir-table-body {
+        .dir-table-body-row {
+            &:focus {
+                background-color: var(--highlight-bg-color);
+            }
+            .dir-table-body-cell {
+            }
+        }
+    }
+}

frontend/app/element/directorytable.tsx

@@ -0,0 +1,69 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from "react";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+import "./directorytable.less";
+
+interface DirectoryTableProps {
+    data: FileInfo[];
+}
+
+const columnHelper = createColumnHelper<FileInfo>();
+
+const defaultColumns = [
+    columnHelper.accessor("path", {
+        cell: (info) => info.getValue(),
+        header: () => <span>Name</span>,
+    }),
+    columnHelper.accessor("size", {
+        cell: (info) => info.getValue(),
+        header: () => <span>Size</span>,
+    }),
+    columnHelper.accessor("mimetype", {
+        cell: (info) => info.getValue(),
+        header: () => <span>Mimetype</span>,
+    }),
+];
+
+function DirectoryTable<T, U>({ data }: DirectoryTableProps) {
+    const [columns] = React.useState<typeof defaultColumns>(() => [...defaultColumns]);
+    const table = useReactTable({
+        data,
+        columns,
+        columnResizeMode: "onChange",
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+        <table className="dir-table">
+            <thead className="dir-table-head">
+                {table.getHeaderGroups().map((headerGroup) => (
+                    <tr className="dir-table-head-row" key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                            <th className="dir-table-head-cell" key={header.id}>
+                                {header.isPlaceholder
+                                    ? null
+                                    : flexRender(header.column.columnDef.header, header.getContext())}
+                            </th>
+                        ))}
+                    </tr>
+                ))}
+            </thead>
+            <tbody className="dir-table-body">
+                {table.getRowModel().rows.map((row) => (
+                    <tr className="dir-table-body-row" key={row.id} tabIndex={0}>
+                        {row.getVisibleCells().map((cell) => (
+                            <td className="dir-table-body-cell" key={cell.id}>
+                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+}
+
+export { DirectoryTable };

frontend/app/element/modal.less

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 .modal-container {
     position: absolute;
     top: 0;

frontend/app/element/modal.tsx

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import React from "react";
 import { Button } from "@/element/button";
 

frontend/app/view/preview.tsx

@@ -8,6 +8,7 @@ import { Markdown } from "@/element/markdown";
 import * as FileService from "@/bindings/pkg/service/fileservice/FileService";
 import * as util from "@/util/util";
 import { CenteredDiv } from "../element/quickelems";
+import { DirectoryTable } from "@/element/directorytable";
 
 import "./view.less";
 
@@ -56,13 +57,7 @@ function StreamingPreview({ fileInfo }: { fileInfo: FileInfo }) {
 function DirectoryPreview({ contentAtom }: { contentAtom: jotai.Atom<Promise<string>> }) {
     const contentText = jotai.useAtomValue(contentAtom);
     let content: FileInfo[] = JSON.parse(contentText);
-    return (
-        <div className="view-preview view-preview-directory">
-            {content.map((finfo) => (
-                <span>{finfo.path}</span>
-            ))}
-        </div>
-    );
+    return <DirectoryTable data={content} />;
 }
 
 function PreviewView({ blockId }: { blockId: string }) {

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.14",
+    "@tanstack/react-table": "^8.17.3",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "base64-js": "^1.5.1",