/*! * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved. * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") * * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * * See the License for the specific language governing permissions and limitations under the License. */ import { MRT_ColumnDef, MRT_Row, MRT_RowSelectionState, MRT_SortingState, MRT_TableInstance, MRT_TableOptions } from "material-react-table"; import { ReactNode } from "react"; import { type MenuButtonProps } from "../Buttons/MenuButton.js"; import { DataTableRowData, DataTableRowSelectionState } from "../index.js"; import { DataFilter } from "../labs/DataFilters.js"; import { paginationTypeValues } from "../Pagination/constants.js"; import { densityValues } from "./constants.js"; import { DataTableRowActionsProps } from "./DataTableRowActions.js"; export type DataTableColumn = MRT_ColumnDef & { /** * @deprecated Use `hasTextWrapping` instead. */ enableWrapping?: boolean; hasTextWrapping?: boolean; }; export type DataTableGetDataType = { filters?: DataFilter[]; page?: number; resultsPerPage?: number; search?: string; sort?: MRT_SortingState; }; export type DataTableOnReorderRowsType = { newRowIndex: number; rowId: string; }; export type DataTableRenderDetailPanelType = { row: MRT_Row; table: MRT_TableInstance; }; export type DataTableProps = { /** * An optional action button above the table. */ additionalActionButton?: ReactNode; /** * MenuItems that go in an optional action menu above the table. */ additionalActionMenuItems?: ReactNode; /** * 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[]; /** * The current page number. * @default 1 */ currentPage?: number; /** * The component to display when the table is displaying the initial empty state */ emptyPlaceholder?: ReactNode; /** * If `error` is not undefined, the DataTable will indicate an error. */ errorMessage?: string; /** * An optional set of filters to render in the filters menu */ filters?: Array | string>; /** * Called 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["data"] | Promise["data"]>; /** * The function to get the ID of a row. * @default (row) => row.id */ getRowId?: MRT_TableOptions["getRowId"]; /** * If `true`, the end user can change the table row density. */ hasChangeableDensity?: boolean; /** * If `true`, the end user can resize individual columns. */ hasColumnResizing?: boolean; /** * If `true`, the end user can show or hide columns. */ hasColumnVisibility?: boolean; /** * If `true`, a filter menu is shown above the table. */ hasFilters?: boolean; /** * If `true`, pagination controls are shown below the table. */ hasPagination?: boolean; /** * If `true`, the end user can reorder rows via drag-and-drop. */ hasRowReordering?: boolean; /** * If `true`, each row includes a checkbox for row selection. */ hasRowSelection?: boolean; /** * If `true`, a search field is shown above the table. */ hasSearch?: boolean; /** * If `true`, the search field includes a submit button; otherwise it fires on each input change. */ hasSearchSubmitButton?: boolean; /** * If `true`, the end user can sort columns ascending, descending, or unsorted. */ hasSorting?: boolean; /** * 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. * @default "comfortable" */ initialDensity?: (typeof densityValues)[number]; /** * The initial search value. * @default "" */ initialSearchValue?: string; /** * If `true`, the next-page or show-more pagination button is disabled. */ isPaginationMoreDisabled?: boolean; /** * The highest page number allowed to be manually input in pagination */ maxPages?: number; /** * The largest number of rows allowed to be shown per page. This only affects the row input in pagination. */ maxResultsPerPage?: number; /** * The component to display when the query returns no results */ noResultsPlaceholder?: ReactNode; /** * Called when a row (or rows) is selected or unselected. */ onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void; /** * Called when the user reorders rows within the table. Can be used to propagate order change to the backend. */ onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void; /** * 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". * @default "paged" */ paginationType?: (typeof paginationTypeValues)[number]; /** * The optional component to display when expanding a row. */ renderDetailPanel?: MRT_TableOptions["renderDetailPanel"]; /** * The number of results per page. * @default 20 */ resultsPerPage?: number; /** * Action buttons to display in each row */ rowActionButtons?: DataTableRowActionsProps["rowActionButtons"]; /** * Menu items to include in the optional actions menu on each row. */ rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"]; /** * The debounce time, in milliseconds, for the search input firing `onChangeSearch` when changed. If `hasSearchSubmitButton` is true, this doesn't do anything. */ searchDelayTime?: number; /** * Overrides the default label for the search field. */ searchFieldLabel?: string; /** * Allows for external control of the selected row state use in tandem with onChangeRowSelection to manage your state */ selectedRows?: DataTableRowSelectionState; /** * 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. */ totalRows?: number; }; declare const MemoizedDataTable: import("react").MemoExoticComponent<({ additionalActionButton, additionalActionMenuItems, bulkActionMenuItems, columns, currentPage, emptyPlaceholder, errorMessage: errorMessageProp, filters: filtersProp, getData, getRowId, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasFilters, hasPagination, hasRowReordering, hasRowSelection, hasSearch, hasSearchSubmitButton, searchFieldLabel, hasSorting, initialDensity, initialSearchValue, isPaginationMoreDisabled, noResultsPlaceholder, onChangeRowSelection, onReorderRows, paginationType, renderDetailPanel, resultsPerPage, maxResultsPerPage, maxPages, rowActionButtons, rowActionMenuItems, searchDelayTime, selectedRows, totalRows, }: DataTableProps) => import("@emotion/react/jsx-runtime").JSX.Element>; export { MemoizedDataTable as DataTable }; //# sourceMappingURL=DataTable.d.ts.map