Merge pull request #694 from sudhanshutech/column/visibililty

Add column visibility responsive handler and add default options in table

Author: sudhanshutech

src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx

@@ -0,0 +1,4 @@
+import { ColView, updateVisibleColumns } from './responsive-column';
+
+export { updateVisibleColumns };
+export type { ColView };

src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx

@@ -0,0 +1,68 @@
+// colViews screen size reference
+/*
+  na: Not visible at any screen width
+  xs: width < 585,
+  s: width > 585 && width < 690,
+  m: width > 690 && width < 775,
+  l: width > 775 && width < 915,
+  xl: width > 915 && width < 1140
+  All columns except "na" are visible for width > 1140
+*/
+
+export interface ColView {
+  0: string; // column name
+  1: 'na' | 'xs' | 's' | 'm' | 'l' | 'xl'; // screen size
+}
+
+export const updateVisibleColumns = (
+  colViews: ColView[],
+  width: number
+): Record<string, boolean> => {
+  // showCols object contains key value pairs that represent whether a column is visible or hidden.
+  // i.e, Here, key = column name, and value = true/false where true means visible and false means hidden
+  const showCols: Record<string, boolean> = {};
+
+  // colViews is a 2D array where each element is an array of 2 elements namely,
+  // column name and the screen size till which they are visible
+  colViews.forEach((col) => {
+    // Hide the columns for any screen size
+    if (col[1] === 'na') {
+      showCols[col[0]] = false;
+    } else if (width > 1140) {
+      // Display all columns above width 1140
+      showCols[col[0]] = true;
+    } else if (width >= 915 && width < 1140) {
+      if (['xs', 's', 'm', 'l', 'xl'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 775 && width < 915) {
+      if (['xs', 's', 'm', 'l'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 690 && width < 775) {
+      if (['xs', 's', 'm'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 585 && width < 690) {
+      if (['xs', 's'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width < 585) {
+      if (col[1] === 'xs') {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    }
+  });
+
+  return showCols;
+};

src/custom/ResponsiveDataTable.tsx

@@ -170,6 +170,11 @@ const ResponsiveDataTable = ({
 
   const updatedOptions = {
     ...options,
+    print: false,
+    download: false,
+    search: false,
+    filter: false,
+    viewColumns: false,
     rowsPerPageOptions: rowsPerPageOptions,
     onViewColumnsChange: (column: string, action: string) => {
       switch (action) {

src/custom/index.tsx

@@ -28,6 +28,7 @@ import { FeedbackButton } from './Feedback';
 import { FlipCard, FlipCardProps } from './FlipCard';
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
+import { ColView, updateVisibleColumns } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { LearningCard } from './LearningCard';
 import { RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
@@ -73,6 +74,7 @@ export {
   StyledDialogTitle,
   TransferList,
   UniversalFilter,
+  updateVisibleColumns,
   useNotificationHandler,
   useWindowDimensions,
   withErrorBoundary,
@@ -101,6 +103,7 @@ export { CustomizedStepper, useStepper } from './Stepper';
 
 export type {
   CatalogFilterProps,
+  ColView,
   CustomColumn,
   CustomColumnVisibilityControlProps,
   CustomDialogProps,