/*! * 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_RowData, MRT_RowSelectionState, MRT_SortingState, MRT_TableOptions } from "material-react-table"; import { Fragment, ReactElement } from "react"; import { Button } from "../Buttons/Button.js"; import { MenuItem } from "../Buttons/MenuItem.js"; import { DataFilter } from "./DataFilters.js"; import { paginationTypeValues } from "./DataTablePagination.js"; export declare const densityValues: readonly ["comfortable", "spacious", "compact"]; export type { MRT_ColumnFiltersState, MRT_SortingState, MRT_ColumnDef as TableColumn, } from "material-react-table"; export type DataTableColumn = { /** * The unique ID of the column */ accessorKey: string; /** * Customize the way each cell in the column is displayed via a custom React component. */ Cell?: MRT_ColumnDef["Cell"]; /** * If `false`, the column is excluded from column-level filtering. */ enableColumnFilter?: boolean; /** * If `false`, the column is excluded from the global search. */ enableGlobalFilter?: boolean; /** * If `false`, the column cannot be hidden by the user. */ enableHiding?: boolean; /** * If `false`, the column cannot be resized by the user. */ enableResizing?: boolean; /** * If `false`, the column cannot be sorted. */ enableSorting?: boolean; /** * If the filter control has preset options (such as a select or multi-select), these are the options provided. */ filterSelectOptions?: Array<{ label: string; value: string; }>; /** * The UI control that will be used to filter the column. Defaults to a standard text input. */ filterVariant?: MRT_ColumnDef["filterVariant"]; /** * The human-friendly title of the column */ header: string; /** * The maximum column width, in pixels */ maxSize?: number; /** * The minimum column width, in pixels */ minSize?: number; /** * The optional column width, in pixels */ size?: number; }; export type DataTableProps = { /** * The columns that make up the table */ columns: DataTableColumn[]; /** * The data that goes into the table, which will be displayed as the table rows */ data: MRT_TableOptions["data"]; /** * Callback that fires whenever the table needs to fetch new data, due to changes in page, results per page, search input, filters, or sorting */ fetchDataFn: ({ page, resultsPerPage, search, filters, sort, }: { filters?: DataFilter[]; page?: number; resultsPerPage?: number; search?: string; sort?: MRT_SortingState; }) => MRT_TableOptions["data"] | Promise["data"]>; /** * The function to get the ID of a row */ 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 global 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 of the table. This is available even if the table density isn't changeable. */ initialDensity?: (typeof densityValues)[number]; /** * Callback that fires when a row (or rows) is selected or unselected. */ onRowSelectionChange?: (rowSelection: MRT_RowSelectionState) => void; /** * The current page number. */ page?: 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". */ paginationType?: (typeof paginationTypeValues)[number]; /** * Callback that fires when the user reorders rows within the table. Can be used to propagate order change to the backend. */ reorderDataFn?: ({ rowId, newIndex, }: { newIndex: number; rowId: string; }) => void; /** * The number of results per page. */ resultsPerPage?: number; /** * Action buttons to display in each row */ rowActionButtons?: (row: TData) => ReactElement; /** * Menu items to include in the optional actions menu on each row. */ rowActionMenuItems?: (row: TData) => ReactElement; /** * The debounce time, in milliseconds, for the search input firing `onChangeSearch` when changed. If `hasSearchSubmitButton` is true, this doesn't do anything. */ searchDelayTime?: number; /** * 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<(({ columns, data: dataProp, getRowId, page: pageProp, initialDensity, resultsPerPage: resultsPerPageProp, fetchDataFn, reorderDataFn, totalRows, hasSearchSubmitButton, searchDelayTime, paginationType, onRowSelectionChange, rowActionButtons, rowActionMenuItems, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasFilters, hasPagination, hasRowReordering, hasRowSelection, hasSearch, hasSorting, }: DataTableProps) => import("@emotion/react/jsx-runtime").JSX.Element)>; export { MemoizedDataTable as DataTable }; //# sourceMappingURL=DataTable.d.ts.map