add custom action to data table

CivicDataLab · May 8, 2024 · 88d8c0d · 88d8c0d
1 parent 5cb337a
commit 88d8c0d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/packages/opub-ui/src/components/DataTable/DataTable.stories.tsx b/packages/opub-ui/src/components/DataTable/DataTable.stories.tsx
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IconCopy, IconPencil, IconTrash } from '@tabler/icons-react';
 import { createColumnHelper } from '@tanstack/react-table';
 
+import { Button } from '../Button';
 import { makeTableData, Person } from '../Table/utils';
 import { DataTable } from './DataTable';
 
@@ -195,6 +196,7 @@ const truncateData: Person[] = [
     visits: 20,
     status: 'Complicated',
     progress: 10,
+    action: 'Action',
   },
 ];
 
@@ -206,3 +208,52 @@ export const Truncate: Story = {
     truncate: true,
   },
 };
+
+const actionColumn = [
+  columnHelper.accessor('firstName', {
+    cell: (info) => info.getValue(),
+    header: () => 'First Name',
+  }),
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName',
+    header: 'Last Name',
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: (info) => info.renderValue(),
+  }),
+  columnHelper.accessor('visits', {
+    header: 'Visits',
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    filterFn: 'columnFilter',
+  }),
+  columnHelper.accessor('action', {
+    header: 'Action',
+    cell: ({ row }) => (
+      <Button
+        size="slim"
+        kind="secondary"
+        onClick={(e) => {
+          e.stopPropagation();
+          console.log(row.original);
+        }}
+      >
+        Delete
+      </Button>
+    ),
+  }),
+];
+
+export const customAction: Story = {
+  args: {
+    columnContentTypes: columnContentTypes,
+    rows: truncateData,
+    columns: actionColumn,
+    truncate: true,
+  },
+};
diff --git a/packages/opub-ui/src/components/Table/utils.ts b/packages/opub-ui/src/components/Table/utils.ts
@@ -1,13 +1,15 @@
-import { range } from '../../utils';
 import { faker } from '@faker-js/faker';
 
+import { range } from '../../utils';
+
 export type Person = {
   firstName: any;
   lastName: string;
   age: number;
   visits: number;
   status: string;
   progress: number;
+  action?: any;
 };
 
 const newPerson = (): Person => {

diff --git a/packages/opub-ui/src/types/button.ts b/packages/opub-ui/src/types/button.ts
@@ -1,6 +1,7 @@
-import { ActionListItemDescriptor } from './actionlist';
 import React, { FocusEvent } from 'react';
 
+import { ActionListItemDescriptor } from './actionlist';
+
 export interface BaseButtonProps {
   /** A unique identifier for the button */
   id?: string;
@@ -31,7 +32,7 @@ export interface BaseButtonProps {
   /** Indicates the current checked state of the button when acting as a toggle or switch */
   ariaChecked?: 'false' | 'true';
   /** Callback when clicked */
-  onClick?(e?: React.MouseEvent<any>): void;
+  onClick?(e: React.MouseEvent<any>): void;
   /** Callback when button becomes focussed */
   onFocus?(e: FocusEvent<Element, Element>): void;
   /** Callback when focus leaves button */