initial commit

dev/routes/(shell)/data.tsx

@@ -0,0 +1,43 @@
+import type { Component } from 'solid-js';
+import { createMemo } from 'solid-js';
+import { SSDataTable, SSHeader, SSSurface } from 'src';
+import { demoRows, renderStatus } from '../../demo/content';
+
+const DataPage: Component = () => {
+  const columns = createMemo(() => [
+    {
+      label: 'Name',
+      render: (row: (typeof demoRows)[number]) => row.name,
+      sortKey: (row: (typeof demoRows)[number]) => row.name,
+    },
+    {
+      label: 'Role',
+      render: (row: (typeof demoRows)[number]) => row.role,
+      sortKey: (row: (typeof demoRows)[number]) => row.role,
+    },
+    {
+      label: 'Status',
+      render: (row: (typeof demoRows)[number]) => renderStatus(row.status),
+      sortKey: (row: (typeof demoRows)[number]) => row.status,
+    },
+    {
+      label: 'Updated',
+      render: (row: (typeof demoRows)[number]) => row.updated,
+      sortKey: (row: (typeof demoRows)[number]) => row.updated,
+    },
+  ]);
+
+  return (
+    <div class="demo_page">
+      <SSHeader title="Data table" subtitle="Sorting, paging, and quick actions." />
+      <SSDataTable
+        columns={columns()}
+        rows={demoRows}
+        pageSize={3}
+        onRowClick={async () => {}}
+      />
+    </div>
+  );
+};
+
+export default DataPage;