chore: display row actions only if present and export datatable heade…

…r and body
bleu · Apr 3, 2024 · 74bc304 · 74bc304
1 parent 30b191e
commit 74bc304
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git a/src/components/DataTable/DataTableRowActions.tsx b/src/components/DataTable/DataTableRowActions.tsx
@@ -10,28 +10,32 @@ import {
 
 import { DynamicActionComponent } from "./DynamicActionComponent";
 
-export const DataTableRowActions = ({ row, column }) => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button
-        variant="ghost"
-        className="data-[state=open]:bg-muted flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-md p-0"
-      >
-        <DotsHorizontalIcon className="h-4 w-4" />
-        <span className="sr-only">Open menu</span>
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" className="w-[160px]">
-      {/* TODO: here we'd need to filter actions that the user cannot perform, or ideally do this in the BE */}
-      {column.columnDef.actions
-        .filter(({ condition_key, condition_value }) => {
-          if (!condition_key && !condition_value) return true;
+export const DataTableRowActions = ({ row, column }) => {
+  if (!column.columnDef.actions.length) return null;
 
-          return row.original?.[condition_key] === condition_value;
-        })
-        .map((action) => (
-          <DynamicActionComponent key={action} action={action} row={row} />
-        ))}
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="data-[state=open]:bg-muted flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-md p-0"
+        >
+          <DotsHorizontalIcon className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[160px]">
+        {/* TODO: here we'd need to filter actions that the user cannot perform, or ideally do this in the BE */}
+        {column.columnDef.actions
+          .filter(({ condition_key, condition_value }) => {
+            if (!condition_key && !condition_value) return true;
+
+            return row.original?.[condition_key] === condition_value;
+          })
+          .map((action) => (
+            <DynamicActionComponent key={action} action={action} row={row} />
+          ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/...taTable/SWRDataTable/SWRDataTableBody.tsx → .../DataTable/SWRDataTable/DataTableBody.tsx b/...taTable/SWRDataTable/SWRDataTableBody.tsx → .../DataTable/SWRDataTable/DataTableBody.tsx
@@ -8,7 +8,7 @@ import { TableBody, TableCell, TableRow } from "#/components/ui";
 
 import { useTableContext } from "../TableContext";
 
-export function SWRDataTableBody({ hasDetails }) {
+export function DataTableBody({ hasDetails }) {
   // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
   const { table } = useTableContext();
 

diff --git a/...Table/SWRDataTable/SWRDataTableHeader.tsx → ...ataTable/SWRDataTable/DataTableHeader.tsx b/...Table/SWRDataTable/SWRDataTableHeader.tsx → ...ataTable/SWRDataTable/DataTableHeader.tsx
@@ -6,7 +6,7 @@ import { TableHead, TableHeader, TableRow } from "#/components/ui";
 
 import { useTableContext } from "../TableContext";
 
-export function SWRDataTableHeader() {
+export function DataTableHeader() {
   // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
   const { table } = useTableContext();
 

diff --git a/src/components/DataTable/SWRDataTable/index.tsx b/src/components/DataTable/SWRDataTable/index.tsx
@@ -15,8 +15,8 @@ import { DataTableRowActions } from "#/components/DataTable/DataTableRowActions"
 import { DataTableToolbar } from "#/components/DataTable/DataTableToolbar";
 import { DataTable } from "../DataTable";
 import { useSWRDataTable } from "../useSWRDataTable";
-import { SWRDataTableHeader } from "./SWRDataTableHeader";
-import { SWRDataTableBody } from "./SWRDataTableBody";
+import { DataTableHeader } from "./DataTableHeader";
+import { DataTableBody } from "./DataTableBody";
 import { deserializeQuery } from "#/lib/serializeQuery";
 
 export const formatParamsToDataTable = (params, searchKey) => {
@@ -214,12 +214,14 @@ export function SWRDataTable({
         <DataTableToolbar action={action} />
         <div className="rounded-md border dark:border-2">
           <Table>
-            <SWRDataTableHeader />
-            <SWRDataTableBody hasDetails={hasDetails} />
+            <DataTableHeader />
+            <DataTableBody hasDetails={hasDetails} />
           </Table>
         </div>
         <DataTablePagination />
       </div>
     </DataTable>
   );
 }
+
+export { DataTableHeader, DataTableBody };