Migrate table (#1834)

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added documentation for the new `terra-table` component.
+
 * Changed
   * Updated `terra-menu` examples with focus highlight styles for terra-button on closing menu with selection of menu-item.
 

packages/terra-framework-docs/package.json

@@ -34,6 +34,7 @@
     "@cerner/terra-docs": "^1.7.0",
     "@cerner/terra-pills": "^1.14.0",
     "classnames": "^2.2.5",
+    "legacy-terra-table": "npm:terra-table@^4.36.0",
     "prop-types": "^15.5.8",
     "terra-action-header": "^2.0.0",
     "terra-aggregator": "^4.75.0",

packages/terra-framework-docs/src/terra-dev-site/doc/table/About.1.doc.mdx

@@ -0,0 +1,50 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+import DefaultTable from "./Examples/DefaultTable?dev-site-example";
+
+import TablePropsTable from "terra-table/lib/Table?dev-site-props-table";
+
+<Badge />
+
+# Terra Table
+
+Terra Table is a structural component used to display tabular data. Table provides means to handle row selection and hooks for sortable columns.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-table`
+
+<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
+
+## Peer Dependencies
+
+This component requires the following peer dependencies be installed in your app for the component to properly function.
+
+| Peer Dependency | Version |
+| --------------- | ------- |
+| react           | ^16.8.5 |
+| react-dom       | ^16.8.5 |
+| react-intl      | ^2.8.0  |
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+## Usage
+
+```jsx
+import Table from "terra-table";
+```
+
+## Component Features
+
+- [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
+- [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
+- [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
+- [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)
+
+# Default Table
+
+<DefaultTable />
+
+## Table Props
+
+<TablePropsTable />

packages/terra-framework-docs/src/terra-dev-site/doc/table/ChangeLog.6.doc.mdx

@@ -0,0 +1,6 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+import ChangeLog from "terra-table/CHANGELOG.md";
+
+<Badge />
+
+<ChangeLog />

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

@@ -0,0 +1,4 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+import DefaultTable from "./DefaultTable?dev-site-example";
+
+<DefaultTable />

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import Table from 'terra-table';
+
+const tableData = {
+  cols: [
+    { id: 'Column-0', displayName: 'Patient', isResizable: true },
+    { 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' },
+    { id: 'Column-7', displayName: 'Patient Age' },
+    { id: 'Column-8', displayName: 'Medication History' },
+    { id: 'Column-9', displayName: 'My Relationship' },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+        { isMasked: true },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1007-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+      ],
+    },
+  ],
+};
+
+const DefaultTable = () => (
+  <Table
+    id="my-table-id"
+    overflowColumns={tableData.cols}
+    rows={tableData.rows}
+  />
+);
+
+export default DefaultTable;

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

@@ -0,0 +1,4 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+import PinnedColumnsTable from "./PinnedColumnsTable?dev-site-example";
+
+<PinnedColumnsTable />

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import Table from 'terra-table';
+
+const tableData = {
+  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' },
+    { id: 'Column-7', displayName: 'Patient Age' },
+    { id: 'Column-8', displayName: 'Medication History' },
+    { id: 'Column-9', displayName: 'My Relationship' },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+        { isMasked: true },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1007-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+      ],
+    },
+  ],
+};
+
+const PinnedColumnsTable = () => (
+  <Table
+    id="my-table-id"
+    pinnedColumns={tableData.cols.slice(0, 2)}
+    overflowColumns={tableData.cols.slice(2)}
+    rows={tableData.rows}
+  />
+);
+
+export default PinnedColumnsTable;

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

@@ -0,0 +1,4 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+import SortableTable from "./SortableTable?dev-site-example";
+
+<SortableTable />

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

@@ -0,0 +1,99 @@
+import React, { useCallback, 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' },
+    { id: 'Column-6', displayName: 'Generic Order Counts' },
+    { id: 'Column-7', displayName: 'Patient Age' },
+    { id: 'Column-8', displayName: 'Medication History' },
+    { id: 'Column-9', displayName: 'My Relationship' },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+        { content: '' },
+        { isMasked: true },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1007-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+        { content: '' },
+        { content: '' },
+        { isMasked: true },
+        { content: 'Admitting Physician' },
+      ],
+    },
+  ],
+};
+
+const SortableTable = () => {
+  const [tableColumns, setTableColumns] = useState(tableData.cols);
+  const [tableRows, setTableRows] = useState(tableData.rows);
+  const handleColumnSelect = useCallback((columnId) => {
+    const newColumns = [...tableColumns].map((col) => {
+      const newCol = { ...col };
+      if (columnId === col.id) {
+        newCol.sortIndicator = col.sortIndicator === 'ascending' ? 'descending' : 'ascending';
+      } else {
+        newCol.sortIndicator = undefined;
+      }
+      return newCol;
+    });
+
+    const newRows = [...tableRows];
+
+    const columnIndex = newColumns.findIndex(col => col.id === columnId);
+    if (columnIndex > -1) {
+      const { sortIndicator } = newColumns[columnIndex];
+      newRows.sort((rowA, rowB) => {
+        const firstRowContent = rowA.cells[columnIndex].content || '';
+        const secondRowContent = rowB.cells[columnIndex].content || '';
+
+        if (sortIndicator === 'ascending') {
+          return firstRowContent.localeCompare(secondRowContent);
+        }
+        return secondRowContent.localeCompare(firstRowContent);
+      });
+    }
+
+    setTableColumns(newColumns);
+    setTableRows(newRows);
+  }, [tableColumns, tableRows]);
+
+  return (
+    <Table
+      id="my-table-id"
+      overflowColumns={tableColumns}
+      rows={tableRows}
+      onColumnSelect={handleColumnSelect}
+    />
+  );
+};
+
+export default SortableTable;

packages/terra-framework-docs/src/terra-dev-site/doc/table/LegacyDocs.1.doc.mdx

@@ -0,0 +1,43 @@
+import LegacyTableProps from "legacy-terra-table/lib/Table?dev-site-props-table";
+
+# Legacy Terra Table
+
+This page is to show the old documentation for Table v4.x.
+
+Terra Table is a structural component used to create data tables. Table provides means to handle row selection and hooks for sortable columns.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-table@4`
+
+<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
+
+## Peer Dependencies
+
+This component requires the following peer dependencies be installed in your app for the component to properly function.
+
+| Peer Dependency | Version |
+| --------------- | ------- |
+| react           | ^16.8.5 |
+| react-dom       | ^16.8.5 |
+| react-intl      | ^2.8.0  |
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+## Usage
+
+```jsx
+import Table from "terra-table";
+```
+
+## Component Features
+
+- [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
+- [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
+- [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
+- [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)
+
+## Table Props
+
+<LegacyTableProps />

packages/terra-framework-docs/src/terra-dev-site/doc/table/UpgradeGuide.1.doc.mdx

@@ -0,0 +1,9 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+
+<Badge />
+
+# Terra Table Upgrade Guide
+
+## Changes from 4.x to 5.0
+
+Terra table will no longer support grid-like (focus, keyboard navigation, etc) functionality and now behaves more like a native, accessible table. See the Docs for new functionality.

packages/terra-framework-docs/src/terra-dev-site/test/menu/menu/DisabledMenuItemClickEvent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Table from 'terra-table';
+import Table from 'legacy-terra-table';
 import Menu from 'terra-menu';
 import Button from 'terra-button';
 

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Table from 'terra-table';
+import tableData from './mockTableData.json';
+
+const DefaultTable = () => {
+  const { cols, rows } = tableData;
+
+  return (
+    <Table
+      id="default-terra-table"
+      overflowColumns={cols}
+      rows={rows}
+      rowHeaderIndex={0}
+      columnHeaderHeight="50px"
+      ariaLabel="table"
+    />
+  );
+};
+
+export default DefaultTable;