feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

client/src/components/responsive-table/responsive-table.component.jsx

@@ -0,0 +1,52 @@
+import { Grid, Table } from "antd";
+import { useMemo } from "react";
+
+function ResponsiveTable({ columns, mobileColumnKeys, scroll, ...rest }) {
+  const screens = Grid.useBreakpoint();
+  const isPhone = !screens.md;
+  const isResponsiveFilteringEnabled = ["1", "true", "yes", "on"].includes(
+    String(import.meta.env.VITE_APP_ENABLE_RESPONSIVE_TABLE_FILTERING || "")
+      .trim()
+      .toLowerCase()
+  );
+
+  const resolvedColumns = useMemo(() => {
+    if (
+      !isResponsiveFilteringEnabled ||
+      !Array.isArray(columns) ||
+      !isPhone ||
+      !Array.isArray(mobileColumnKeys) ||
+      mobileColumnKeys.length === 0
+    ) {
+      return columns;
+    }
+
+    const visibleColumnKeys = new Set(mobileColumnKeys);
+    const filteredColumns = columns.filter((column) => {
+      const key = column?.key ?? column?.dataIndex;
+
+      // Keep columns with no stable key to avoid accidental loss.
+      if (key == null) return true;
+
+      if (Array.isArray(key)) {
+        return key.some((part) => visibleColumnKeys.has(part));
+      }
+
+      return visibleColumnKeys.has(key);
+    });
+
+    return filteredColumns.length > 0 ? filteredColumns : columns;
+  }, [columns, isPhone, isResponsiveFilteringEnabled, mobileColumnKeys]);
+
+  const resolvedScroll = scroll ?? { x: "max-content" };
+
+  return <Table columns={resolvedColumns} scroll={resolvedScroll} {...rest} />;
+}
+
+ResponsiveTable.Summary = Table.Summary;
+ResponsiveTable.Column = Table.Column;
+ResponsiveTable.ColumnGroup = Table.ColumnGroup;
+ResponsiveTable.SELECTION_COLUMN = Table.SELECTION_COLUMN;
+ResponsiveTable.EXPAND_COLUMN = Table.EXPAND_COLUMN;
+
+export default ResponsiveTable;