TablePagination.d.ts
10.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../styles/index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { TablePaginationActionsProps, TablePaginationActionsSlots } from "../TablePaginationActions/index.js";
import { TableCellProps } from "../TableCell/index.js";
import { IconButtonProps } from "../IconButton/index.js";
import { SelectProps } from "../Select/index.js";
import { TablePaginationClasses } from "./tablePaginationClasses.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
import { ToolbarProps } from "../Toolbar/index.js";
import { MenuItemProps } from "../MenuItem/index.js";
export interface LabelDisplayedRowsArgs {
from: number;
to: number;
count: number;
page: number;
}
export interface TablePaginationRootSlotPropsOverrides {}
export interface TablePaginationToolbarSlotPropsOverrides {}
export interface TablePaginationSpacerSlotPropsOverrides {}
export interface TablePaginationSelectLabelSlotPropsOverrides {}
export interface TablePaginationSelectSlotPropsOverrides {}
export interface TablePaginationMenuItemSlotPropsOverrides {}
export interface TablePaginationDisplayedRowsSlotPropsOverrides {}
export interface TablePaginationActionsSlotPropsOverrides {}
export interface TablePaginationSlots {
/**
* The component that renders the root slot.
* [Follow this guide](https://mui.com/material-ui/api/table-cell/#props) to learn more about the requirements for this component.
* @default TableCell
*/
root: React.ElementType;
/**
* The component that renders the toolbar slot.
* [Follow this guide](https://mui.com/material-ui/api/toolbar/#props) to learn more about the requirements for this component.
* @default Toolbar
*/
toolbar: React.ElementType;
/**
* The tag that renders the spacer slot.
* @default 'div'
*/
spacer: React.ElementType;
/**
* The tag that renders the selectLabel slot.
* @default 'p'
*/
selectLabel: React.ElementType;
/**
* The component that renders the select slot.
* [Follow this guide](https://mui.com/material-ui/api/select/#props) to learn more about the requirements for this component.
* @default Select
*/
select: React.ElementType;
/**
* The component that renders the select slot.
* [Follow this guide](https://mui.com/material-ui/api/menu-item/#props) to learn more about the requirements for this component.
* @default MenuItem
*/
menuItem: React.ElementType;
/**
* The tag that renders the displayedRows slot.
* @default 'p'
*/
displayedRows: React.ElementType;
/**
* The slots that passed to the actions slot.
*/
actions: TablePaginationActionsSlots;
}
export type TablePaginationSlotsAndSlotProps = CreateSlotsAndSlotProps<TablePaginationSlots, {
/**
* Props forwarded to the root slot.
* By default, the available props are based on the [TableCell](https://mui.com/material-ui/api/table-cell/#props) component.
*/
root: SlotProps<React.ElementType<TableCellProps>, TablePaginationRootSlotPropsOverrides, TablePaginationOwnerState>;
/**
* Props forwarded to the toolbar slot.
* By default, the available props are based on the [Toolbar](https://mui.com/material-ui/api/toolbar/#props) component.
*/
toolbar: SlotProps<React.ElementType<ToolbarProps>, TablePaginationToolbarSlotPropsOverrides, TablePaginationOwnerState>;
/**
* Props forwarded to the spacer slot.
* By default, the available props are based on the div element.
*/
spacer: SlotProps<'div', TablePaginationSpacerSlotPropsOverrides, TablePaginationOwnerState>;
/**
* Props forwarded to the selectLabel slot.
* By default, the available props are based on the paragraph element.
*/
selectLabel: SlotProps<'p', TablePaginationSelectLabelSlotPropsOverrides, TablePaginationOwnerState>;
/**
* Props forwarded to the select slot.
* By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
*/
select: Partial<SelectProps> & TablePaginationSelectSlotPropsOverrides;
/**
* Props forwarded to the menuItem slot.
* By default, the available props are based on the [MenuItem](https://mui.com/material-ui/api/menu-item/#props) component.
*/
menuItem: SlotProps<React.ElementType<MenuItemProps>, TablePaginationMenuItemSlotPropsOverrides, TablePaginationOwnerState>;
/**
* Props forwarded to the displayedRows slot.
* By default, the available props are based on the paragraph element.
*/
displayedRows: SlotProps<'p', TablePaginationDisplayedRowsSlotPropsOverrides, TablePaginationOwnerState>;
/**
* Props forwarded to the actions slot.
*/
actions: TablePaginationActionsProps['slotProps'] & TablePaginationActionsSlotPropsOverrides;
}>;
/**
* This type is kept for compatibility. Use `TablePaginationOwnProps` instead.
*/
export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;
export interface TablePaginationOwnProps extends TablePaginationBaseProps {
/**
* The component used for displaying the actions.
* Either a string to use a HTML element or a component.
* @default TablePaginationActions
*/
ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
/**
* Props applied to the back arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) component.
*
* This prop is an alias for `slotProps.actions.previousButton` and will be overridden by it if both are used.
* @deprecated Use `slotProps.actions.previousButton` instead.
*/
backIconButtonProps?: Partial<IconButtonProps>;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<TablePaginationClasses>;
/**
* The total number of rows.
*
* To enable server side pagination for an unknown number of items, provide -1.
*/
count: number;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
* This is important for screen reader users.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
* @returns {string}
* @default function defaultGetAriaLabel(type) {
* return `Go to ${type} page`;
* }
*/
getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
/**
* Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
* object.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default function defaultLabelDisplayedRows({ from, to, count }) {
* return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
* }
*/
labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
/**
* Customize the rows per page label.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Rows per page:'
*/
labelRowsPerPage?: React.ReactNode;
/**
* Props applied to the next arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) element.
*
* This prop is an alias for `slotProps.actions.nextButton` and will be overridden by it if both are used.
* @deprecated Use `slotProps.actions.nextButton` instead.
*/
nextIconButtonProps?: Partial<IconButtonProps>;
/**
* Callback fired when the page is changed.
*
* @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
* @param {number} page The page selected.
*/
onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
/**
* Callback fired when the number of rows per page is changed.
*
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
*/
onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
/**
* The zero-based index of the current page.
*/
page: number;
/**
* The number of rows per page.
*
* Set -1 to display all the rows.
*/
rowsPerPage: number;
/**
* Customizes the options of the rows per page select field. If less than two options are
* available, no select field will be displayed.
* Use -1 for the value with a custom label to show all the rows.
* @default [10, 25, 50, 100]
*/
rowsPerPageOptions?: ReadonlyArray<number | {
value: number;
label: string;
}>;
/**
* Props applied to the rows per page [`Select`](https://mui.com/material-ui/api/select/) element.
*
* This prop is an alias for `slotProps.select` and will be overridden by it if both are used.
* @deprecated Use `slotProps.select` instead.
*
* @default {}
*/
SelectProps?: Partial<SelectProps>;
/**
* If `true`, show the first-page button.
* @default false
*/
showFirstButton?: boolean;
/**
* If `true`, show the last-page button.
* @default false
*/
showLastButton?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface TablePaginationOwnerState extends TablePaginationOwnProps {}
export interface TablePaginationTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
props: AdditionalProps & TablePaginationOwnProps & TablePaginationSlotsAndSlotProps;
defaultComponent: RootComponent;
}
/**
* A `TableCell` based component for placing inside `TableFooter` for pagination.
*
* Demos:
*
* - [Pagination](https://mui.com/material-ui/react-pagination/)
* - [Table](https://mui.com/material-ui/react-table/)
*
* API:
*
* - [TablePagination API](https://mui.com/material-ui/api/table-pagination/)
* - inherits [TableCell API](https://mui.com/material-ui/api/table-cell/)
*/
declare const TablePagination: OverridableComponent<TablePaginationTypeMap<{}, React.JSXElementConstructor<TablePaginationBaseProps>>>;
export type TablePaginationProps<RootComponent extends React.ElementType = React.JSXElementConstructor<TablePaginationBaseProps>, AdditionalProps = {}> = OverrideProps<TablePaginationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default TablePagination;