add data table features

CivicDataLab · May 14, 2024 · aeb2a68 · aeb2a68
1 parent 88d8c0d
commit aeb2a68
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/opub-ui/src/components/DataTable/DataTable.module.scss b/packages/opub-ui/src/components/DataTable/DataTable.module.scss
@@ -1,7 +1,7 @@
 @import '../../../styles/common';
 
 .DataTable {
-  --op-data-table-first-column-width: 145px;
+  --op-data-table-column-width: 145px;
   max-width: 100vw;
   background-color: var(--surface-default);
   border-radius: var(--border-radius-2);
@@ -160,7 +160,7 @@
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
-  max-width: var(--op-data-table-first-column-width);
+  max-width: var(--op-data-table-column-width);
 }
 
 .Heading {

diff --git a/packages/opub-ui/src/components/DataTable/DataTable.stories.tsx b/packages/opub-ui/src/components/DataTable/DataTable.stories.tsx
@@ -4,6 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 
 import { Button } from '../Button';
 import { makeTableData, Person } from '../Table/utils';
+import { TextField } from '../TextField';
 import { DataTable } from './DataTable';
 
 /**
@@ -257,3 +258,57 @@ export const customAction: Story = {
     truncate: true,
   },
 };
+
+const editableColumn = [
+  columnHelper.accessor('firstName', {
+    cell: (info) => {
+      return (
+        <TextField
+          label="First Name"
+          labelHidden
+          name="firstName"
+          type="text"
+          defaultValue={info.getValue()}
+        />
+      );
+    },
+    header: () => 'First Name',
+  }),
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName',
+    header: 'Last Name',
+    cell: (info) => {
+      return (
+        <TextField
+          label="Last Name"
+          labelHidden
+          name="lastName"
+          type="text"
+          defaultValue={info.getValue()}
+        />
+      );
+    },
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: (info) => {
+      return (
+        <TextField
+          label="Age"
+          labelHidden
+          name="age"
+          type="number"
+          defaultValue={String(info.getValue())}
+        />
+      );
+    },
+  }),
+];
+
+export const EditableFields: Story = {
+  args: {
+    columnContentTypes: columnContentTypes,
+    rows: makeTableData(30),
+    columns: editableColumn,
+  },
+};
diff --git a/packages/opub-ui/src/components/DataTable/DataTable.tsx b/packages/opub-ui/src/components/DataTable/DataTable.tsx
@@ -242,7 +242,7 @@ const DataTable = (props: DataTableProps) => {
                           columnTypes[index] === 'numeric' &&
                           styles['Cell-numeric'],
                         index === 0 && styles['Cell-firstColumn'],
-                        index === 0 && truncate && styles['Cell-truncated']
+                        truncate && styles['Cell-truncated']
                       )}
                       key={cell.id}
                       text={text}