diff --git a/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx b/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx new file mode 100644 index 00000000..eaadb2d8 --- /dev/null +++ b/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx @@ -0,0 +1,4 @@ +import { ColView, updateVisibleColumns } from './responsive-column'; + +export { updateVisibleColumns }; +export type { ColView }; diff --git a/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx b/src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx new file mode 100644 index 00000000..d8df29f4 --- /dev/null +++ b/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 => { + // 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 = {}; + + // 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; +}; diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 7a7ab73e..bb091476 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/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) { diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 94200bd5..e2d2e404 100644 --- a/src/custom/index.tsx +++ b/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,