| 1 | import * as React from 'react';
|
| 2 | import { StyleProp, View, ViewStyle } from 'react-native';
|
| 3 | export type Props = React.ComponentPropsWithRef<typeof View> & {
|
| 4 | /**
|
| 5 | * Content of the `DataTable`.
|
| 6 | */
|
| 7 | children: React.ReactNode;
|
| 8 | style?: StyleProp<ViewStyle>;
|
| 9 | };
|
| 10 | /**
|
| 11 | * Data tables allow displaying sets of data.
|
| 12 | *
|
| 13 | * ## Usage
|
| 14 | * ```js
|
| 15 | * import * as React from 'react';
|
| 16 | * import { DataTable } from 'react-native-paper';
|
| 17 | *
|
| 18 | * const MyComponent = () => {
|
| 19 | * const [page, setPage] = React.useState<number>(0);
|
| 20 | * const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);
|
| 21 | * const [itemsPerPage, onItemsPerPageChange] = React.useState(
|
| 22 | * numberOfItemsPerPageList[0]
|
| 23 | * );
|
| 24 | *
|
| 25 | * const [items] = React.useState([
|
| 26 | * {
|
| 27 | * key: 1,
|
| 28 | * name: 'Cupcake',
|
| 29 | * calories: 356,
|
| 30 | * fat: 16,
|
| 31 | * },
|
| 32 | * {
|
| 33 | * key: 2,
|
| 34 | * name: 'Eclair',
|
| 35 | * calories: 262,
|
| 36 | * fat: 16,
|
| 37 | * },
|
| 38 | * {
|
| 39 | * key: 3,
|
| 40 | * name: 'Frozen yogurt',
|
| 41 | * calories: 159,
|
| 42 | * fat: 6,
|
| 43 | * },
|
| 44 | * {
|
| 45 | * key: 4,
|
| 46 | * name: 'Gingerbread',
|
| 47 | * calories: 305,
|
| 48 | * fat: 3.7,
|
| 49 | * },
|
| 50 | * ]);
|
| 51 | *
|
| 52 | * const from = page * itemsPerPage;
|
| 53 | * const to = Math.min((page + 1) * itemsPerPage, items.length);
|
| 54 | *
|
| 55 | * React.useEffect(() => {
|
| 56 | * setPage(0);
|
| 57 | * }, [itemsPerPage]);
|
| 58 | *
|
| 59 | * return (
|
| 60 | * <DataTable>
|
| 61 | * <DataTable.Header>
|
| 62 | * <DataTable.Title>Dessert</DataTable.Title>
|
| 63 | * <DataTable.Title numeric>Calories</DataTable.Title>
|
| 64 | * <DataTable.Title numeric>Fat</DataTable.Title>
|
| 65 | * </DataTable.Header>
|
| 66 | *
|
| 67 | * {items.slice(from, to).map((item) => (
|
| 68 | * <DataTable.Row key={item.key}>
|
| 69 | * <DataTable.Cell>{item.name}</DataTable.Cell>
|
| 70 | * <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
|
| 71 | * <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
|
| 72 | * </DataTable.Row>
|
| 73 | * ))}
|
| 74 | *
|
| 75 | * <DataTable.Pagination
|
| 76 | * page={page}
|
| 77 | * numberOfPages={Math.ceil(items.length / itemsPerPage)}
|
| 78 | * onPageChange={(page) => setPage(page)}
|
| 79 | * label={`${from + 1}-${to} of ${items.length}`}
|
| 80 | * numberOfItemsPerPageList={numberOfItemsPerPageList}
|
| 81 | * numberOfItemsPerPage={itemsPerPage}
|
| 82 | * onItemsPerPageChange={onItemsPerPageChange}
|
| 83 | * showFastPaginationControls
|
| 84 | * selectPageDropdownLabel={'Rows per page'}
|
| 85 | * />
|
| 86 | * </DataTable>
|
| 87 | * );
|
| 88 | * };
|
| 89 | *
|
| 90 | * export default MyComponent;
|
| 91 | * ```
|
| 92 | */
|
| 93 | declare const DataTable: {
|
| 94 | ({ children, style, ...rest }: Props): React.JSX.Element;
|
| 95 | Header: {
|
| 96 | ({ children, style, theme: themeOverrides, ...rest }: import("./DataTableHeader").Props): React.JSX.Element;
|
| 97 | displayName: string;
|
| 98 | };
|
| 99 | Title: {
|
| 100 | ({ numeric, children, onPress, sortDirection, textStyle, style, theme: themeOverrides, numberOfLines, maxFontSizeMultiplier, ...rest }: import("./DataTableTitle").Props): React.JSX.Element;
|
| 101 | displayName: string;
|
| 102 | };
|
| 103 | Row: {
|
| 104 | ({ onPress, style, children, pointerEvents, theme: themeOverrides, ...rest }: import("./DataTableRow").Props): React.JSX.Element;
|
| 105 | displayName: string;
|
| 106 | };
|
| 107 | Cell: {
|
| 108 | ({ children, textStyle, style, numeric, maxFontSizeMultiplier, testID, ...rest }: import("./DataTableCell").Props): React.JSX.Element;
|
| 109 | displayName: string;
|
| 110 | };
|
| 111 | Pagination: {
|
| 112 | ({ label, accessibilityLabel, page, numberOfPages, onPageChange, style, showFastPaginationControls, numberOfItemsPerPageList, numberOfItemsPerPage, onItemsPerPageChange, selectPageDropdownLabel, selectPageDropdownAccessibilityLabel, selectPageDropdownRippleColor, dropdownItemRippleColor, theme: themeOverrides, ...rest }: import("./DataTablePagination").Props): React.JSX.Element;
|
| 113 | displayName: string;
|
| 114 | };
|
| 115 | };
|
| 116 | export default DataTable;
|
| 117 | //# sourceMappingURL=DataTable.d.ts.map |
| \ | No newline at end of file |