Merge pull request #1170 from securityscorecard/ajkl2533@UXD-1647

feat(DatatableV2): add option to disable selection toolbar
securityscorecard · Oct 14, 2024 · 1e5010d · 1e5010d
2 parents c5539a1 + df29254
commit 1e5010d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/src/components/DatatableV2/Datatable.types.ts b/src/components/DatatableV2/Datatable.types.ts
@@ -234,6 +234,7 @@ export interface ParsedDatatableOptions<D>
   enableRowActions?: DatatableOptions<D>['enableRowActions'];
   enableRowsPerPage?: DatatableOptions<D>['enableRowsPerPage'];
   enableSelectAll?: DatatableOptions<D>['enableSelectAll'];
+  enableSelectionToolbar?: DatatableOptions<D>['enableSelectionToolbar'];
   enableTopToolbar?: DatatableOptions<D>['enableTopToolbar'];
   initialState?: DatatableOptions<D>['initialState'];
   onShowColumnSettings?: DatatableOptions<D>['onShowColumnSettings'];
@@ -452,6 +453,14 @@ export interface DatatableOptions<D>
    * @default true
    */
   enableSelectAll?: boolean;
+  /**
+   * Enables/disables the selection toolbar with the batch action buttons. If this is set to `false`
+   * consumers has to control the selection state on their own as the Datatable doesn't provide other
+   * way how to access the interal state.
+   *
+   * @default true
+   */
+  enableSelectionToolbar?: boolean;
   /**
    * Enables/disables table sorting
    *

diff --git a/src/components/DatatableV2/hooks/useOptions.ts b/src/components/DatatableV2/hooks/useOptions.ts
@@ -22,6 +22,7 @@ export const useOptions = <D>({
   enableRowSelection = true,
   enableRowsPerPage = false,
   enableSelectAll = true,
+  enableSelectionToolbar = true,
   enableSorting = true,
   enableSortingRemoval = true,
   enableTopToolbar = true,
@@ -80,6 +81,7 @@ export const useOptions = <D>({
     enableRowSelection,
     enableRowsPerPage,
     enableSelectAll,
+    enableSelectionToolbar,
     enableSorting,
     enableSortingRemoval,
     enableTopToolbar,

diff --git a/src/components/DatatableV2/stories/Selection.stories.tsx b/src/components/DatatableV2/stories/Selection.stories.tsx
@@ -113,6 +113,13 @@ RowSelectionActions.parameters = {
   screenshot: { skip: false },
 };
 
+export const DisabledSelectionToolbar: Story = Template.bind({});
+DisabledSelectionToolbar.args = {
+  ...SelectionEnabled.args,
+  initialState: RowSelectionActions.args.initialState,
+  enableSelectionToolbar: false,
+};
+
 export const SelectionManagedState: Story = (args) => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({
     'e23968c3-3f19-44b2-aee9-c4a1d7c326ee': true,

diff --git a/src/components/DatatableV2/table/TableSurface.tsx b/src/components/DatatableV2/table/TableSurface.tsx
@@ -85,7 +85,8 @@ const TableSurface = <D,>({ table }: { table: DatatableInstance<D> }) => {
         {table.options.enableTopToolbar && <TopToolbar table={table} />}
         <Table table={table} />
       </Surface>
-      {table.options.enableRowSelection && <Selection table={table} />}
+      {table.options.enableRowSelection &&
+        table.options.enableSelectionToolbar && <Selection table={table} />}
       {table.options.enablePagination &&
         table.getRowModel().rows.length > 0 && <Pagination table={table} />}
     </DatatableRoot>