[terra-table] Add row selection to table component

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added examples and test to `terra-table` for row selection mode.
+
 * Fixed
   * Fixed the `terra-tabs` icon-only examples keyboard navigation issue.
 

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableRowSelection.doc.mdx

@@ -0,0 +1,3 @@
+import TableRowSelection from './TableRowSelection?dev-site-example';
+
+<TableRowSelection title='Table With Row Selection' />

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableRowSelection.jsx

@@ -0,0 +1,234 @@
+import React, { useState, useRef, useCallback } from 'react';
+import Table from 'terra-table';
+
+const tableDataJSON = {
+  cols: [
+    { id: 'Column-0', displayName: 'Patient' },
+    { id: 'Column-1', displayName: 'Location' },
+    { id: 'Column-2', displayName: 'Illness Severity' },
+    { id: 'Column-3', displayName: 'Visit' },
+    { id: 'Column-4', displayName: 'Allergy' },
+    { id: 'Column-5', displayName: 'Primary Contact' },
+    { id: 'Column-6', displayName: 'Generic Order Counts' },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '', isMasked: true },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1107-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+        { content: '' },
+
+      ],
+    },
+    {
+      id: '3',
+      cells: [
+        { content: 'Carr, Alicia' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 3 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+
+      ],
+    },
+    {
+      id: '4',
+      cells: [
+        { content: 'McMurphy, Donald' },
+        { content: '1024-MTN', isMasked: true },
+        { content: 'Stable' },
+        { content: 'Inpatient, 5 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '5',
+      cells: [
+        { content: 'Peters, Timothy' },
+        { content: '1207-MTN' },
+        { content: 'Unstable', isMasked: true },
+        { content: 'Outpatient, 15 days' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '6',
+      cells: [
+        { content: 'Jones, Becky' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '7',
+      cells: [
+        { content: 'Williams, Peter' },
+        { content: '1002-KTN' },
+        { content: 'Unstable' },
+        { content: 'Outpatient, 9 days' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '8',
+      cells: [
+        { content: 'Pratt, Michaela' },
+        { content: '2108-NTN' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 45 days' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '9',
+      cells: [
+        { content: 'Styris, Scott' },
+        { content: '1007-MTN', isMasked: true },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '10',
+      cells: [
+        { content: 'Cook, Allan' },
+        { content: '1700-SKB' },
+        { content: 'Stable' },
+        { content: 'Inpatient, 4 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '11',
+      cells: [
+        { content: 'Lahey, Nathaniel' },
+        { content: '1348-DRS' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 1 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '12',
+      cells: [
+        { content: 'Harris, Isabella' },
+        { content: '1809-MTN' },
+        { content: 'Stable' },
+        { content: 'Inpatient, 6 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+    {
+      id: '13',
+      cells: [
+        { content: 'Millstone, Asher' },
+        { content: '4133-MZN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 9 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+      ],
+    },
+  ],
+};
+
+const RowSelection = () => {
+  const rowSelectionModeRef = useRef();
+  const rowHeaderIndex = 0;
+  const { cols, rows } = tableDataJSON;
+  const [rowData, setRowData] = useState(rows);
+  const [hasSelectableRows, setHasSelectableRows] = useState(false);
+
+  const clearRowSelection = useCallback(() => {
+    const newRowData = [...rowData];
+    // eslint-disable-next-line no-return-assign, no-param-reassign
+    newRowData.forEach(row => (row.isSelected = false));
+    setRowData(newRowData);
+  }, [rowData]);
+
+  const onRowSelectionModeChange = useCallback((event) => {
+    if (!event.target.checked) {
+      clearRowSelection();
+    }
+    setHasSelectableRows(event.target.checked);
+  }, [clearRowSelection]);
+
+  const onRowSelect = useCallback((rowId) => {
+    // Remove current selections
+    const newRowData = [...rowData];
+
+    const dataRowToUpdate = newRowData.find(row => row.id === rowId);
+    if (dataRowToUpdate) {
+      dataRowToUpdate.isSelected = !dataRowToUpdate.isSelected;
+    }
+
+    setRowData(newRowData);
+  }, [rowData]);
+
+  return (
+    <React.Fragment>
+      <div>
+        <label htmlFor="rowSelectionMode"><b>Row Selection Mode</b></label>
+        <input
+          id="rowSelectionMode"
+          type="checkbox"
+          ref={rowSelectionModeRef}
+          onChange={onRowSelectionModeChange}
+        />
+      </div>
+      <Table
+        id="table-with-row-selections"
+        overflowColumns={cols}
+        rows={rowData}
+        rowHeaderIndex={rowHeaderIndex}
+        columnWidth="180px"
+        ariaLabel="Table with Row Selections"
+        hasSelectableRows={hasSelectableRows} // Prop to turn row selection mode on/off
+        onRowSelect={onRowSelect} // For row selection, consumer must provide a callback that the Worklist Data Grid will call when the user selects one or more rows.
+      />
+    </React.Fragment>
+  );
+};
+
+export default RowSelection;

packages/terra-table/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 * Added
   * Added the ability to toggle zebra striping for table rows.
+  * Added row selection mode to the table component.
 
 * Changed
   * Updated the table component so that the cell dive-in logic would not execute when not in the grid context.