@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/src/DataTable/DataTable.tsx

@@ -23,7 +23,6 @@ import {
   MRT_Cell,
   MRT_DensityState,
   MRT_Row,
-  MRT_RowData,
   MRT_SortingState,
   MRT_TableOptions,
   MRT_RowSelectionState,
@@ -31,15 +30,20 @@ import {
   MRT_VisibilityState,
   useMaterialReactTable,
   MRT_TableContainer,
+  MRT_Column,
+  MRT_ColumnDef,
+  MRT_TableInstance,
 } from "material-react-table";
+import { useTranslation } from "react-i18next";
 import {
   ArrowDownIcon,
   ArrowUnsortedIcon,
+  ChevronDownIcon,
   DragIndicatorIcon,
   MoreIcon,
 } from "../icons.generated";
-import { densityValues, paginationTypeValues } from "./constants";
-import { DataTablePagination } from "./DataTablePagination";
+import { densityValues } from "./constants";
+import { Pagination, paginationTypeValues, usePagination } from "../Pagination";
 import { DataFilter, DataFilters } from "../labs/DataFilters";
 import {
   DataTableRowActions,
@@ -49,20 +53,34 @@ import { useRowReordering } from "./useRowReordering";
 import { DataTableSettings } from "./DataTableSettings";
 import { MenuButton, MenuButtonProps } from "../MenuButton";
 import { Box } from "../Box";
-import {
-  DataTableColumn,
-  DataTableRowData,
-  DataTableRowSelectionState,
-} from ".";
+import { DataTableRowSelectionState, DataTableRowData } from ".";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../OdysseyDesignTokensContext";
 import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
-import { DataTableEmptyState } from "./DataTableEmptyState";
+import { EmptyState } from "../EmptyState";
 import { Callout } from "../Callout";
-import { t } from "i18next";
+
+export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {
+  /**
+   * @deprecated use hasTextWrapping instead of enableWrapping
+   */
+  enableWrapping?: boolean;
+  hasTextWrapping?: boolean;
+};
+
+type DataTableColumnInstance<T extends DataTableRowData> = Omit<
+  MRT_Column<T, unknown>,
+  "columnDef"
+> & {
+  columnDef: DataTableColumn<T>;
+};
+
+type DataTableCell<T extends DataTableRowData> = Omit<MRT_Cell<T>, "column"> & {
+  column: DataTableColumnInstance<T>;
+};
 
 export type DataTableGetDataType = {
   page?: number;
@@ -77,29 +95,55 @@ export type DataTableOnReorderRowsType = {
   newRowIndex: number;
 };
 
+export type DataTableRenderDetailPanelType = {
+  row: MRT_Row<DataTableRowData>;
+  table: MRT_TableInstance<DataTableRowData>;
+};
+
 export type DataTableProps = {
+  /**
+   * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected
+   */
+  bulkActionMenuItems?: (
+    selectedRows: MRT_RowSelectionState,
+  ) => MenuButtonProps["children"];
   /**
    * The columns that make up the table
    */
-  columns: MRT_TableOptions<MRT_RowData>["columns"];
+  columns: DataTableColumn<DataTableRowData>[];
   /**
-   * The total number of rows in the table. Optional, because it's sometimes impossible
-   * to calculate. Used in table pagination to know when to disable the "next"/"more" button.
+   * The current page number.
    */
-  totalRows?: number;
+  currentPage?: number;
   /**
-   * The function to get the ID of a row
+   * If `error` is not undefined, the DataTable will indicate an error.
    */
-  getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
+  errorMessage?: string;
   /**
-   * The initial density (height & padding) of the table rows. This is available even if the
-   * table density isn't changeable by the end user via hasChangeableDensity.
+   * The component to display when the table is displaying the initial empty state
    */
-  initialDensity?: (typeof densityValues)[number];
+  emptyPlaceholder?: ReactNode;
   /**
-   * If true, the end user will be able to change the table density.
+   * An optional set of filters to render in the filters menu
    */
-  hasChangeableDensity?: boolean;
+  filters?: Array<DataFilter | DataTableColumn<DataTableRowData> | string>;
+  /**
+   * The function to get the ID of a row
+   */
+  getRowId?: MRT_TableOptions<DataTableRowData>["getRowId"];
+  /**
+   * Callback that fires whenever the table needs to fetch new data, due to changes in
+   * page, results per page, search input, filters, or sorting
+   */
+  getData: ({
+    page,
+    resultsPerPage,
+    search,
+    filters,
+    sort,
+  }: DataTableGetDataType) =>
+    | MRT_TableOptions<DataTableRowData>["data"]
+    | Promise<MRT_TableOptions<DataTableRowData>["data"]>;
   /**
    * If true, the end user can resize individual columns.
    */
@@ -116,6 +160,10 @@ export type DataTableProps = {
    * If true, the table will include pagination controls.
    */
   hasPagination?: boolean;
+  /**
+   * If true, the end user can reorder rows via a drag-and-drop interface
+   */
+  hasRowReordering?: boolean;
   /**
    * If true, the table will include checkboxes on each row, enabling
    * the user to select some or all rows.
@@ -125,60 +173,40 @@ export type DataTableProps = {
    * If true, the global table search controls will be shown.
    */
   hasSearch?: boolean;
-  /**
-   * If true, the end user can sort columns (ascending, descending, or neither)
-   */
-  hasSorting?: boolean;
-  /**
-   * If true, the end user can reorder rows via a drag-and-drop interface
-   */
-  hasRowReordering?: boolean;
   /**
    * If true, the search field will include a Search button, rather than
    * firing on input change.
    */
   hasSearchSubmitButton?: boolean;
   /**
-   * The debounce time, in milliseconds, for the search input firing
-   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,
-   * this doesn't do anything.
+   * If true, the end user can sort columns (ascending, descending, or neither)
    */
-  searchDelayTime?: number;
+  hasSorting?: boolean;
   /**
-   * Callback that fires when a row (or rows) is selected or unselected.
+   * If true, the end user will be able to change the table density.
    */
-  onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;
+  hasChangeableDensity?: boolean;
   /**
-   * Callback that fires whenever the table needs to fetch new data, due to changes in
-   * page, results per page, search input, filters, or sorting
+   * The initial density (height & padding) of the table rows. This is available even if the
+   * table density isn't changeable by the end user via hasChangeableDensity.
    */
-  getData: ({
-    page,
-    resultsPerPage,
-    search,
-    filters,
-    sort,
-  }: DataTableGetDataType) =>
-    | MRT_TableOptions<MRT_RowData>["data"]
-    | Promise<MRT_TableOptions<MRT_RowData>["data"]>;
+  initialDensity?: (typeof densityValues)[number];
   /**
-   * Callback that fires when the user reorders rows within the table. Can be used
-   * to propogate order change to the backend.
+   * The initial search value
    */
-  onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;
+  initialSearchValue?: string;
   /**
-   * The current page number.
+   * The component to display when the query returns no results
    */
-  currentPage?: number;
+  noResultsPlaceholder?: ReactNode;
   /**
    * The number of results per page.
    */
   resultsPerPage?: number;
   /**
-   * The type of pagination controls shown. Defaults to next/prev buttons, but can be
-   * set to a simple "Load more" button by setting to "loadMore".
+   * The optional component to display when expanding a row.
    */
-  paginationType?: (typeof paginationTypeValues)[number];
+  renderDetailPanel?: MRT_TableOptions<DataTableRowData>["renderDetailPanel"];
   /**
    * Action buttons to display in each row
    */
@@ -188,27 +216,30 @@ export type DataTableProps = {
    */
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
   /**
-   * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected
+   * The debounce time, in milliseconds, for the search input firing
+   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,
+   * this doesn't do anything.
    */
-  bulkActionMenuItems?: (
-    selectedRows: MRT_RowSelectionState,
-  ) => MenuButtonProps["children"];
+  searchDelayTime?: number;
   /**
-   * If `error` is not undefined, the DataTable will indicate an error.
+   * Callback that fires when a row (or rows) is selected or unselected.
    */
-  errorMessage?: string;
+  onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;
   /**
-   * The component to display when the table is displaying the initial empty state
+   * Callback that fires when the user reorders rows within the table. Can be used
+   * to propogate order change to the backend.
    */
-  emptyPlaceholder?: ReactNode;
+  onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;
   /**
-   * The component to display when the query returns no results
+   * The type of pagination controls shown. Defaults to next/prev buttons, but can be
+   * set to a simple "Load more" button by setting to "loadMore".
    */
-  noResultsPlaceholder?: ReactNode;
+  paginationType?: (typeof paginationTypeValues)[number];
   /**
-   * An optional set of filters to render in the filters menu
+   * The total number of rows in the table. Optional, because it's sometimes impossible
+   * to calculate. Used in table pagination to know when to disable the "next"/"more" button.
    */
-  filters?: Array<DataFilter | DataTableColumn<DataTableRowData> | string>;
+  totalRows?: number;
 };
 
 const displayColumnDefOptions = {
@@ -262,6 +293,9 @@ const displayColumnDefOptions = {
       padding: "checkbox",
     },
   },
+  "mrt-row-expand": {
+    header: "",
+  },
 };
 
 const ScrollableTableContainer = styled("div", {
@@ -279,9 +313,6 @@ const ScrollableTableContainer = styled("div", {
     isScrollableStart: boolean;
     isScrollableEnd: boolean;
   }) => ({
-    borderBlockEndColor: odysseyDesignTokens.HueNeutral100,
-    borderBlockEndStyle: "solid",
-    borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,
     marginBlockEnd: odysseyDesignTokens.Spacing4,
     position: "relative",
     borderInlineStartColor: isScrollableStart
@@ -325,20 +356,14 @@ const ScrollableTableContainer = styled("div", {
 );
 
 const DataTable = ({
+  bulkActionMenuItems,
   columns,
-  getRowId: getRowIdProp,
   currentPage = 1,
-  initialDensity = densityValues[0],
-  resultsPerPage = 20,
+  emptyPlaceholder,
+  errorMessage: errorMessageProp,
+  filters: filtersProp,
   getData,
-  onReorderRows,
-  totalRows,
-  hasSearchSubmitButton,
-  searchDelayTime,
-  paginationType = "paged",
-  onChangeRowSelection,
-  rowActionButtons,
-  rowActionMenuItems,
+  getRowId: getRowIdProp,
   hasChangeableDensity,
   hasColumnResizing,
   hasColumnVisibility,
@@ -347,19 +372,30 @@ const DataTable = ({
   hasRowReordering,
   hasRowSelection,
   hasSearch,
+  hasSearchSubmitButton,
   hasSorting,
-  bulkActionMenuItems,
-  errorMessage: errorMessageProp,
-  emptyPlaceholder,
+  initialDensity = densityValues[0],
+  initialSearchValue = "",
   noResultsPlaceholder,
-  filters: filtersProp,
+  onChangeRowSelection,
+  onReorderRows,
+  paginationType = "paged",
+  renderDetailPanel,
+  resultsPerPage = 20,
+  rowActionButtons,
+  rowActionMenuItems,
+  searchDelayTime,
+  totalRows,
 }: DataTableProps) => {
-  const [data, setData] = useState<MRT_RowData[]>([]);
+  const { t } = useTranslation();
+
+  const [data, setData] = useState<DataTableRowData[]>([]);
   const [pagination, setPagination] = useState({
     pageIndex: currentPage,
     pageSize: resultsPerPage,
   });
-  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
+  const [draggingRow, setDraggingRow] =
+    useState<MRT_Row<DataTableRowData> | null>();
   const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
     useState(true);
   const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =
@@ -377,7 +413,7 @@ const DataTable = ({
   const [rowDensity, setRowDensity] =
     useState<MRT_DensityState>(initialDensity);
   const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
-  const [search, setSearch] = useState<string>("");
+  const [search, setSearch] = useState<string>(initialSearchValue);
   const [filters, setFilters] = useState<DataFilter[]>();
   const [initialFilters, setInitialFilters] = useState<DataFilter[]>();
   const [isLoading, setIsLoading] = useState<boolean | undefined>(true);
@@ -416,18 +452,20 @@ const DataTable = ({
     page: pagination.pageIndex,
   });
 
-  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;
+  const getRowId = getRowIdProp
+    ? getRowIdProp
+    : (row: DataTableRowData) => row.id;
 
-  const rowDensityCellClassName = useMemo(() => {
+  const rowDensityClassName = useMemo(() => {
     return rowDensity === "spacious"
-      ? "MuiTableCell-spacious"
+      ? "MuiTableBody-spacious"
       : rowDensity === "compact"
-        ? "MuiTableCell-compact"
-        : "MuiTableCell-default";
+        ? "MuiTableBody-compact"
+        : "MuiTableBody-default";
   }, [rowDensity]);
 
   const renderRowActions = useCallback(
-    ({ row }: { row: MRT_Row<MRT_RowData> }) => {
+    ({ row }: { row: MRT_Row<DataTableRowData> }) => {
       const currentIndex =
         row.index + (pagination.pageIndex - 1) * pagination.pageSize;
       return (
@@ -523,9 +561,15 @@ const DataTable = ({
   }, [columns, filtersProp, convertColumnToFilter]);
 
   const defaultCell = useCallback(
-    ({ cell }: { cell: MRT_Cell<MRT_RowData> }) => {
+    ({ cell }: { cell: DataTableCell<DataTableRowData> }) => {
       const value = cell.getValue<string>();
-      return (
+      const hasTextWrapping =
+        cell.column.columnDef.hasTextWrapping ||
+        cell.column.columnDef.enableWrapping;
+
+      return hasTextWrapping ? (
+        value
+      ) : (
         <Box
           sx={{
             whiteSpace: "nowrap",
@@ -542,9 +586,9 @@ const DataTable = ({
 
   const emptyState = useCallback(() => {
     const noResultsInnerContent = noResultsPlaceholder || (
-      <DataTableEmptyState
+      <EmptyState
         heading={t("table.noresults.heading")}
-        text={t("table.noresults.text")}
+        description={t("table.noresults.text")}
       />
     );
 
@@ -557,28 +601,45 @@ const DataTable = ({
       </Box>
     );
   }, [
-    tableInnerContainerWidth,
     emptyPlaceholder,
-    noResultsPlaceholder,
     isEmpty,
+    noResultsPlaceholder,
+    t,
+    tableInnerContainerWidth,
   ]);
 
+  const columnIds = useMemo(() => {
+    return columns.map((column) => column.accessorKey);
+  }, [columns]);
+
+  const columnOrder = useMemo(
+    () => [
+      "mrt-row-drag",
+      "mrt-row-select",
+      "mrt-row-expand",
+      ...columnIds,
+      "mrt-row-actions",
+    ],
+    [columnIds],
+  ) as string[];
+
   const dataTable = useMaterialReactTable({
     columns: columns,
     data: data,
     getRowId: getRowId,
     state: {
-      density: rowDensity,
       sorting: columnSorting,
       globalFilter: search,
       columnVisibility,
       isLoading,
       rowSelection,
+      columnOrder,
     },
     icons: {
       ArrowDownwardIcon: ArrowDownIcon,
       DragHandleIcon: DragIndicatorIcon,
       SyncAltIcon: ArrowUnsortedIcon,
+      ExpandMoreIcon: ChevronDownIcon,
     },
 
     // Base table settings
@@ -601,9 +662,9 @@ const DataTable = ({
     },
     selectAllMode: "all",
     displayColumnDefOptions:
-      displayColumnDefOptions as MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"],
-    muiTableBodyCellProps: () => ({
-      className: rowDensityCellClassName,
+      displayColumnDefOptions as MRT_TableOptions<DataTableRowData>["displayColumnDefOptions"],
+    muiTableBodyProps: () => ({
+      className: rowDensityClassName,
     }),
     defaultColumn: {
       Cell: defaultCell,
@@ -636,7 +697,7 @@ const DataTable = ({
         ? true
         : false,
     positionActionsColumn:
-      "last" as MRT_TableOptions<MRT_RowData>["positionActionsColumn"],
+      "last" as MRT_TableOptions<DataTableRowData>["positionActionsColumn"],
     renderRowActions: ({ row }) => renderRowActions({ row }),
 
     // Row selection
@@ -674,6 +735,10 @@ const DataTable = ({
     muiTableContainerProps: {
       ref: tableInnerContainerRef,
     },
+
+    // Row expansion
+    enableExpandAll: false,
+    renderDetailPanel: renderDetailPanel,
   });
 
   // Effects
@@ -712,7 +777,15 @@ const DataTable = ({
         setIsLoading(false);
       }
     })();
-  }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);
+  }, [
+    columnSorting,
+    errorMessageProp,
+    filters,
+    getData,
+    pagination,
+    search,
+    t,
+  ]);
 
   useEffect(() => {
     if (!initialFilters && filters) {
@@ -740,6 +813,12 @@ const DataTable = ({
     onChangeRowSelection?.(rowSelection);
   }, [rowSelection, onChangeRowSelection]);
 
+  const { lastRow } = usePagination({
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    totalRows,
+  });
+
   // Render the table
   return (
     <>
@@ -755,6 +834,7 @@ const DataTable = ({
             hasSearchSubmitButton={hasSearchSubmitButton}
             searchDelayTime={searchDelayTime}
             filters={hasFilters ? dataTableFilters : undefined}
+            defaultSearchTerm={initialSearchValue}
             isDisabled={isEmpty}
             additionalActions={
               <>
@@ -790,12 +870,19 @@ const DataTable = ({
       </ScrollableTableContainer>
 
       {hasPagination && (
-        <DataTablePagination
-          pagination={pagination}
-          setPagination={setPagination}
+        <Pagination
+          pageIndex={pagination.pageIndex}
+          pageSize={pagination.pageSize}
+          onPaginationChange={setPagination}
+          lastRow={lastRow}
           totalRows={totalRows}
           isDisabled={isEmpty}
           variant={paginationType}
+          rowsPerPageLabel={t("pagination.rowsperpage")}
+          currentPageLabel={t("pagination.page")}
+          previousLabel={t("pagination.previous")}
+          nextLabel={t("pagination.next")}
+          loadMoreLabel={t("pagination.loadmore")}
         />
       )}
     </>

package/src/DataTable/DataTableRowActions.tsx

@@ -27,7 +27,7 @@ import { DataTableProps } from "./DataTable";
 import { Trans, useTranslation } from "react-i18next";
 
 export type DataTableRowActionsProps = {
-  row: MRT_Row<MRT_RowData>;
+  row: MRT_Row<MRT_RowData> | MRT_RowData;
   rowIndex: number;
   rowActionButtons?: (
     row: MRT_RowData,

package/src/DataTable/constants.ts

@@ -11,4 +11,3 @@
  */
 
 export const densityValues = ["comfortable", "spacious", "compact"] as const;
-export const paginationTypeValues = ["paged", "loadMore"] as const;

package/src/DataTable/index.tsx

@@ -12,17 +12,17 @@
 
 export {
   DataTable,
+  type DataTableColumn,
   type DataTableProps,
   type DataTableGetDataType,
   type DataTableOnReorderRowsType,
+  type DataTableRenderDetailPanelType,
 } from "./DataTable";
-export { DataTableEmptyState } from "./DataTableEmptyState";
 export { densityValues } from "./constants";
 export type {
   MRT_ColumnFiltersState as DataTableFiltersState,
   MRT_SortingState as DataTableSortingState,
   MRT_RowSelectionState as DataTableRowSelectionState,
-  MRT_ColumnDef as DataTableColumn,
   MRT_RowData as DataTableRowData,
   MRT_Row as DataTableRow,
 } from "material-react-table";