feat: add initial search prop to DataTable

packages/odyssey-react-mui/src/DataTable/DataTable.tsx

@@ -97,28 +97,49 @@ export type DataTableRenderDetailPanelType = {
 };
 
 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: 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<DataTableRowData>["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.
    */
@@ -135,6 +156,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.
@@ -144,60 +169,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<DataTableRowData>["data"]
-    | Promise<MRT_TableOptions<DataTableRowData>["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
    */
@@ -207,31 +212,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
-   */
-  bulkActionMenuItems?: (
-    selectedRows: MRT_RowSelectionState,
-  ) => MenuButtonProps["children"];
-  /**
-   * If `error` is not undefined, the DataTable will indicate an error.
+   * The debounce time, in milliseconds, for the search input firing
+   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,
+   * this doesn't do anything.
    */
-  errorMessage?: string;
+  searchDelayTime?: number;
   /**
-   * The component to display when the table is displaying the initial empty state
+   * Callback that fires when a row (or rows) is selected or unselected.
    */
-  emptyPlaceholder?: ReactNode;
+  onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;
   /**
-   * The component to display when the query returns no results
+   * Callback that fires when the user reorders rows within the table. Can be used
+   * to propogate order change to the backend.
    */
-  noResultsPlaceholder?: ReactNode;
+  onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;
   /**
-   * An optional set of filters to render in the filters menu
+   * 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".
    */
-  filters?: Array<DataFilter | DataTableColumn<DataTableRowData> | string>;
+  paginationType?: (typeof paginationTypeValues)[number];
   /**
-   * The optional component to display when expanding a row.
+   * 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.
    */
-  renderDetailPanel?: MRT_TableOptions<DataTableRowData>["renderDetailPanel"];
+  totalRows?: number;
 };
 
 const displayColumnDefOptions = {
@@ -348,20 +352,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,
@@ -370,13 +368,20 @@ 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<DataTableRowData[]>([]);
   const [pagination, setPagination] = useState({
@@ -402,7 +407,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);
@@ -812,6 +817,7 @@ const DataTable = ({
             hasSearchSubmitButton={hasSearchSubmitButton}
             searchDelayTime={searchDelayTime}
             filters={hasFilters ? dataTableFilters : undefined}
+            defaultSearchTerm={initialSearchValue}
             isDisabled={isEmpty}
             additionalActions={
               <>

packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx

@@ -314,6 +314,15 @@ const storybookMeta: Meta<DataTableProps> = {
         },
       },
     },
+    initialSearchValue: {
+      control: "text",
+      description: "The initial search value",
+      table: {
+        type: {
+          summary: `string`,
+        },
+      },
+    },
   },
   decorators: [MuiThemeDecorator],
 };