loucyx commented on code in PR #42184:
URL: https://github.com/apache/airflow/pull/42184#discussion_r1755785463
##########
airflow/ui/src/components/DataTable/DataTable.tsx:
##########
@@ -42,97 +27,51 @@ import {
Tr,
useColorModeValue,
} from "@chakra-ui/react";
+import {
+ flexRender,
+ getCoreRowModel,
+ getExpandedRowModel,
+ getPaginationRowModel,
+ useReactTable,
+ type ColumnDef,
+ type OnChangeFn,
+ type TableState as ReactTableState,
+ type Row,
+ type Table as TanStackTable,
+ type Updater,
+} from "@tanstack/react-table";
import React, { Fragment, useCallback, useRef } from "react";
import {
TiArrowSortedDown,
TiArrowSortedUp,
TiArrowUnsorted,
} from "react-icons/ti";
+import { TablePaginator } from "./TablePaginator";
import type { TableState } from "./types";
type DataTableProps<TData> = {
- data: TData[];
- total?: number;
- columns: ColumnDef<TData>[];
- renderSubComponent?: (props: {
+ readonly columns: Array<ColumnDef<TData>>;
+ readonly data: Array<TData>;
+ readonly getRowCanExpand?: (row: Row<TData>) => boolean;
+ readonly initialState?: TableState;
+ readonly onStateChange?: (state: TableState) => void;
+ readonly renderSubComponent?: (props: {
row: Row<TData>;
- }) => React.ReactElement | null;
- getRowCanExpand?: (row: Row<TData>) => boolean;
- initialState?: TableState;
- onStateChange?: (state: TableState) => void;
-};
-
-type PaginatorProps<TData> = {
- table: TanStackTable<TData>;
+ }) => React.ReactElement;
+ readonly total?: number;
};
-const TablePaginator = <TData,>({ table }: PaginatorProps<TData>) => {
- const pageInterval = 3;
- const currentPageNumber = table.getState().pagination.pageIndex + 1;
- const startPageNumber = Math.max(1, currentPageNumber - pageInterval);
- const endPageNumber = Math.min(
- table.getPageCount(),
- startPageNumber + pageInterval * 2
- );
- const pageNumbers = [];
-
- for (let index = startPageNumber; index <= endPageNumber; index++) {
- pageNumbers.push(
- <Button
- borderRadius={0}
- key={index}
- isDisabled={index === currentPageNumber}
- onClick={() => table.setPageIndex(index - 1)}
- >
- {index}
- </Button>
- );
- }
-
- return (
- <Box mt={2} mb={2}>
- <Button
- borderRadius={0}
- onClick={() => table.firstPage()}
- isDisabled={!table.getCanPreviousPage()}
- >
- {"<<"}
- </Button>
-
- <Button
- borderRadius={0}
- onClick={() => table.previousPage()}
- isDisabled={!table.getCanPreviousPage()}
- >
- {"<"}
- </Button>
- {pageNumbers}
- <Button
- borderRadius={0}
- onClick={() => table.nextPage()}
- isDisabled={!table.getCanNextPage()}
- >
- {">"}
- </Button>
- <Button
- borderRadius={0}
- onClick={() => table.lastPage()}
- isDisabled={!table.getCanNextPage()}
- >
- {">>"}
- </Button>
- </Box>
- );
-};
+const defaultGetRowCanExpand = () => false;
+// eslint-disable-next-line max-lines-per-function
export const DataTable = <TData,>({
- data,
- total = 0,
columns,
- renderSubComponent = () => null,
- getRowCanExpand = () => false,
+ data,
+ getRowCanExpand = defaultGetRowCanExpand,
Review Comment:
The default value was moved outside the function header so we avoid having a
different function each render (detected by the linter 💖)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
