feat: added select/deselect all button to column selection

docs/stories/aIntro.stories.tsx

@@ -15,7 +15,7 @@ export default {
       table: { disable: true },
     },
     fullWidth: {
-      defaultValue: true,
+      defaultValue: 'left',
       options: [true, false, 'left', 'right'],
       control: { type: 'inline-radio' },
     },
@@ -31,7 +31,7 @@ export const Primary = {
     virtual: true,
     enableExport: true,
     stickyHeader: true,
-    fullWidth: true,
+    fullWidth: 'left',
   },
 };
 

src/components/columnSelection.tsx

@@ -13,6 +13,8 @@ export function ColumnSelection<T>(): JSX.Element {
   const Settings = useTheme((t) => t.icons.Settings);
   const selectColumns = useTheme((t) => t.text.selectColumns);
   const resetAll = useTheme((t) => t.text.resetAll);
+  const showAll = useTheme((t) => t.text.showAllColumns);
+  const hideAll = useTheme((t) => t.text.hideAllColumns);
   const classes = useTheme((t) => t.classes);
   const cssVariables = useCssVariables();
 
@@ -23,14 +25,20 @@ export function ColumnSelection<T>(): JSX.Element {
 
   const [anchorElement, setAnchorElement] = useState<Element | null>(null);
 
-  const toggle = (column: InternalColumn<T, unknown>) => {
+  const toggle = (column?: InternalColumn<T, unknown>, state?: boolean) => {
     const {
       props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange },
     } = table.getState();
 
     const newValue = new Set(hiddenColumns);
-    if (hiddenColumns.has(column.id)) newValue.delete(column.id);
-    else newValue.add(column.id);
+
+    for (const columnId of column ? [column.id] : columns.map((column) => column.id)) {
+      if (state ?? hiddenColumns.has(columnId)) {
+        newValue.delete(columnId);
+      } else {
+        newValue.add(columnId);
+      }
+    }
 
     if (!controlledHiddenColumns) {
       table.update((state) => {
@@ -41,6 +49,8 @@ export function ColumnSelection<T>(): JSX.Element {
     onHiddenColumnsChange?.(newValue);
   };
 
+  const allVisible = columns.every((column) => !hiddenColumns.has(column.id));
+
   return (
     <>
       <IconButton onClick={(event) => setAnchorElement(anchorElement ? null : event.currentTarget)}>
@@ -58,6 +68,16 @@ export function ColumnSelection<T>(): JSX.Element {
         <div css={{ padding: `calc(var(--spacing) * 2)`, display: 'grid' }}>
           <div css={{ marginBottom: 'var(--spacing)' }}>{selectColumns}</div>
 
+          <div css={{ margin: '0.5em 0', display: 'flex', gap: '0.5em' }}>
+            <Button variant="outlined" onClick={() => toggle(undefined, !allVisible)}>
+              {allVisible ? hideAll : showAll}
+            </Button>
+
+            <Button variant="outlined" onClick={reset}>
+              {resetAll}
+            </Button>
+          </div>
+
           {columns.map((column) => (
             <FormControlLabel
               key={column.id}
@@ -71,10 +91,6 @@ export function ColumnSelection<T>(): JSX.Element {
               label={column.header}
             ></FormControlLabel>
           ))}
-
-          <Button variant="outlined" onClick={reset}>
-            {resetAll}
-          </Button>
         </div>
       </Popover>
     </>

src/theme/defaultTheme/defaultTexts.tsx

@@ -2,6 +2,8 @@ import type { TableTheme } from '../../types';
 
 export const defaultTexts: TableTheme['text'] = {
   selectColumns: 'Select visible columns',
+  showAllColumns: 'Show all',
+  hideAllColumns: 'Hide all',
   noResults: 'No results',
   exportTitle: 'Export',
   exportCopy: 'To clipboard',

src/types.ts

@@ -21,6 +21,8 @@ export interface TableTheme<T = unknown> {
   /** Define display texts. */
   text: {
     selectColumns: ReactNode;
+    showAllColumns: ReactNode;
+    hideAllColumns: ReactNode;
     noResults: ReactNode;
     exportTitle: ReactNode;
     exportCopy: ReactNode;