[terra-table] Adding subsections to sections

packages/terra-framework-docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Added
+  * Added documentation for subsections in `terra-table`.
   * Added examples and tests for `isAutoFocusEnabled` prop for `terra-data-grid`.
 
 * Changed

packages/terra-framework-docs/src/terra-dev-site/test/table/TableWithCollapsibleSectionsAndSubSections.test.jsx

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import Table from 'terra-table';
+
+const tableData = {
+  cols: [
+    {
+      id: 'Column-0', displayName: 'Patient', sortIndicator: 'ascending', isSelectable: true,
+    },
+    {
+      id: 'Column-1', displayName: 'Location', isSelectable: true,
+    },
+    { id: 'Column-2', displayName: 'Illness Severity', isSelectable: true },
+    { id: 'Column-3', displayName: 'Visit' },
+    { id: 'Column-4', displayName: 'Allergy' },
+    { id: 'Column-5', displayName: 'Primary Contact' },
+
+  ],
+  sections: [{
+    id: 'section-0',
+    isCollapsible: true,
+    isCollapsed: true,
+    text: 'Test Section',
+    subsections: [
+      {
+        id: 'subsection-0',
+        text: 'Test SubSection',
+        rows: [
+          {
+            id: '1',
+            cells: [
+              { content: 'Fleck, Arthur' },
+              { content: '1007-MTN' },
+              { content: 'Unstable' },
+              { content: 'Inpatient, 2 months' },
+              { content: '' },
+              { content: 'Quinzell, Harleen' },
+            ],
+          },
+          {
+            id: '2',
+            cells: [
+              { content: 'Wayne, Bruce' },
+              { content: '1007-MTN-DR' },
+              { content: 'Stable' },
+              { content: 'Outpatient, 2 days' },
+              { content: 'Phytochemicals' },
+              { content: 'Grayson, Richard' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'subsection-1',
+        text: 'Test SubSection #2',
+        rows: [
+          {
+            id: '3',
+            cells: [
+              { content: 'Fleck, Arthur' },
+              { content: '1007-MTN' },
+              { content: 'Unstable' },
+              { content: 'Inpatient, 2 months' },
+              { content: '' },
+              { content: 'Quinzell, Harleen' },
+            ],
+          },
+          {
+            id: '4',
+            cells: [
+              { content: 'Wayne, Bruce' },
+              { content: '1007-MTN-DR' },
+              { content: 'Stable' },
+              { content: 'Outpatient, 2 days' },
+              { content: 'Phytochemicals' },
+              { content: 'Grayson, Richard' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'section-1',
+    isCollapsible: true,
+    isCollapsed: true,
+    text: 'Test Section #2',
+    subsections: [
+      {
+        id: 'subsection-2',
+        text: 'Test SubSection',
+        rows: [
+          {
+            id: '5',
+            cells: [
+              { content: 'Parker, Peter' },
+              { content: '1007-MTN' },
+              { content: 'Unstable' },
+              { content: 'Inpatient, 2 months' },
+              { content: '' },
+              { content: 'Octopus, Doctor' },
+            ],
+          },
+          {
+            id: '6',
+            cells: [
+              { content: 'Stark, Tony' },
+              { content: '1007-MTN-DR' },
+              { content: 'Stable' },
+              { content: 'Outpatient, 2 days' },
+              { content: 'Phytochemicals' },
+              { content: 'America, Captain' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'subsection-3',
+        text: 'Test SubSection #2',
+        rows: [
+          {
+            id: '7',
+            cells: [
+              { content: 'Parker, Peter' },
+              { content: '1007-MTN' },
+              { content: 'Unstable' },
+              { content: 'Inpatient, 2 months' },
+              { content: '' },
+              { content: 'Octopus, Doctor' },
+            ],
+          },
+          {
+            id: '8',
+            cells: [
+              { content: 'Stark, Tony' },
+              { content: '1007-MTN-DR' },
+              { content: 'Stable' },
+              { content: 'Outpatient, 2 days' },
+              { content: 'Phytochemicals' },
+              { content: 'America, Captain' },
+            ],
+          },
+        ],
+      },
+    ],
+  }],
+};
+
+const TableWithCollapsibleSections = () => {
+  const [tableSections, setTableSections] = useState(tableData.sections);
+
+  const handleSectionSelect = (sectionId) => {
+    const newSections = [...tableSections];
+    const sectionIndex = newSections.findIndex(section => section.id === sectionId);
+
+    if (sectionIndex > -1) {
+      newSections[sectionIndex].isCollapsed = !newSections[sectionIndex].isCollapsed;
+    }
+
+    setTableSections(newSections);
+  };
+
+  return (
+    <Table
+      id="table-with-sub-sections"
+      overflowColumns={tableData.cols}
+      sections={tableSections}
+      onSectionSelect={handleSectionSelect}
+    />
+  );
+};
+
+export default TableWithCollapsibleSections;

packages/terra-framework-docs/src/terra-dev-site/test/table/TableWithSubSections.test.jsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import Table from 'terra-table';
+
+const tableData = {
+  cols: [
+    {
+      id: 'Column-0', displayName: 'Patient', sortIndicator: 'ascending', isSelectable: true,
+    },
+    {
+      id: 'Column-1', displayName: 'Location', isSelectable: true,
+    },
+    { id: 'Column-2', displayName: 'Illness Severity', isSelectable: true },
+    { id: 'Column-3', displayName: 'Visit' },
+    { id: 'Column-4', displayName: 'Allergy' },
+    { id: 'Column-5', displayName: 'Primary Contact' },
+
+  ],
+  sections: [{
+    id: 'section-0',
+    text: 'Test Section',
+    subsections: [
+      {
+        id: 'subsection-0',
+        text: 'Test SubSection',
+        rows: [
+          {
+            id: '1',
+            cells: [
+              { content: 'Fleck, Arthur' },
+              { content: '1007-MTN' },
+              { content: 'Unstable' },
+              { content: 'Inpatient, 2 months' },
+              { content: '' },
+              { content: 'Quinzell, Harleen' },
+            ],
+          },
+          {
+            id: '2',
+            cells: [
+              { content: 'Wayne, Bruce' },
+              { content: '1007-MTN-DR' },
+              { content: 'Stable' },
+              { content: 'Outpatient, 2 days' },
+              { content: 'Phytochemicals' },
+              { content: 'Grayson, Richard' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'subsection-1',
+        text: 'Test SubSection #2',
+        rows: [
+          {
+            id: '3',
+            cells: [
+              { content: 'Fleck, Arthur' },
+              { content: '1007-MTN' },
+              { content: 'Unstable' },
+              { content: 'Inpatient, 2 months' },
+              { content: '' },
+              { content: 'Quinzell, Harleen' },
+            ],
+          },
+          {
+            id: '4',
+            cells: [
+              { content: 'Wayne, Bruce' },
+              { content: '1007-MTN-DR' },
+              { content: 'Stable' },
+              { content: 'Outpatient, 2 days' },
+              { content: 'Phytochemicals' },
+              { content: 'Grayson, Richard' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'section-1',
+    text: 'Test Section #2',
+    rows: [
+      {
+        id: '5',
+        cells: [
+          { content: 'Parker, Peter' },
+          { content: '1007-MTN' },
+          { content: 'Unstable' },
+          { content: 'Inpatient, 2 months' },
+          { content: '' },
+          { content: 'Octopus, Doctor' },
+        ],
+      },
+      {
+        id: '6',
+        cells: [
+          { content: 'Stark, Tony' },
+          { content: '1007-MTN-DR' },
+          { content: 'Stable' },
+          { content: 'Outpatient, 2 days' },
+          { content: 'Phytochemicals' },
+          { content: 'America, Captain' },
+        ],
+      },
+    ],
+  }],
+};
+
+const TableWithSections = () => {
+  const [tableSections, setTableSections] = useState(tableData.sections);
+
+  const handleSectionSelect = (sectionId) => {
+    const newSections = [...tableSections];
+    const sectionIndex = newSections.findIndex(section => section.id === sectionId);
+
+    if (sectionIndex > -1) {
+      newSections[sectionIndex].isCollapsed = !newSections[sectionIndex].isCollapsed;
+    }
+
+    setTableSections(newSections);
+  };
+
+  return (
+    <Table
+      id="table-with-sub-sections"
+      pinnedColumns={tableData.cols.slice(0, 2)}
+      overflowColumns={tableData.cols.slice(2)}
+      sections={tableSections}
+      onSectionSelect={handleSectionSelect}
+    />
+  );
+};
+
+export default TableWithSections;

packages/terra-table/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * (flowsheet-data-grid only) Added support for subsections.
+
 * Changed
   * Updated the cell component auto focus logic to be configured by the grid context.
 

packages/terra-table/src/Table.jsx

@@ -328,10 +328,18 @@ function Table(props) {
   const headerRowCount = hasVisibleColumnHeaders ? (hasColumnHeaderActions ? 2 : 1) : 0;
 
   // Calculate total table row count
+  const subSectionReducer = (rowCount, currentSubsection) => {
+    // eslint-disable-next-line no-param-reassign
+    currentSubsection.subSectionRowIndex = rowCount + 1;
+    return rowCount + currentSubsection.rows.length + 1;
+  };
   const tableSectionReducer = (rowCount, currentSection) => {
     if (currentSection.id !== defaultSectionRef.current) {
       // eslint-disable-next-line no-param-reassign
       currentSection.sectionRowIndex = rowCount + 1;
+      if (currentSection.subsections) {
+        return currentSection.subsections.reduce(subSectionReducer, rowCount + 1);
+      }
       return rowCount + currentSection.rows.length + 1;
     }
     // eslint-disable-next-line no-param-reassign
@@ -373,7 +381,12 @@ function Table(props) {
   // useEffect for row updates
   useEffect(() => {
     const previousSelectedRows = [...selectedRows.current];
-    const selectableRows = tableSections.flatMap(section => (section.rows.map(row => (row))));
+    const selectableRows = tableSections.flatMap(section => {
+      if (section.subsections) {
+        return section.subsections.flatMap(subsection => (subsection.rows.map(row => (row))));
+      }
+      return section.rows.map(row => (row));
+    });
     selectedRows.current = selectableRows.filter((row) => row.isSelected).map(row => (row.id));
 
     if (previousSelectedRows.length > 0 && selectedRows.current.length === 0) {
@@ -685,6 +698,7 @@ function Table(props) {
               isTableStriped={isStriped}
               text={section.text}
               rows={section.rows}
+              subsections={section.subsections}
               rowHeight={rowHeight}
               rowSelectionMode={rowSelectionMode}
               displayedColumns={displayedColumns}

packages/terra-table/src/clinical-lowlight-theme/Section.module.scss

@@ -3,5 +3,13 @@
     --terra-table-cell-border-left: 1px solid #181b1d;
     --terra-table-cell-border-right: 1px solid #181b1d;
     --terra-table-section-focus-outline: 3px dashed #fff;
+
+    /* stylelint-disable selector-max-compound-selectors */
+    &.header-row {
+      .header-cell .subsection-header-row {
+        --terra-section-header-background: #161616;
+        --terra-table-subsection-border-bottom: #161616;
+      }
+    }
   }
 }

packages/terra-table/src/orion-fusion-theme/Section.module.scss

@@ -14,7 +14,10 @@
       .header-cell:focus {
         --terra-table-section-focus-outline: none;
       }
+
+      .header-cell .subsection-header-row {
+        --terra-section-header-font-size: 1rem;
+      }
     }
-    /* stylelint-enable selector-max-compound-selectors */
   }
 }