|
|
@@ -6,78 +6,87 @@ import {
|
|
|
themeQuartz,
|
|
|
} from "ag-grid-community";
|
|
|
import { AgGridReact } from "ag-grid-react";
|
|
|
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
|
+import {
|
|
|
+ forwardRef,
|
|
|
+ ReactNode,
|
|
|
+ useCallback,
|
|
|
+ useImperativeHandle,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
|
|
|
import { Card } from "../Card";
|
|
|
import { Paginator } from "../Paginator";
|
|
|
import { Skeleton } from "../Skeleton";
|
|
|
-import { useMediaQueryBreakpoint } from '../useMediaQuery';
|
|
|
-import { FullWidthCellRenderer } from './full-width-cell-renderer';
|
|
|
import styles from "./index.module.scss";
|
|
|
-import type { TableGridProps } from './table-grid-props';
|
|
|
+import type { TableGridProps } from "./table-grid-props";
|
|
|
+
|
|
|
// Register all Community features
|
|
|
-ModuleRegistry.registerModules([AllCommunityModule, TextFilterModule,
|
|
|
- ClientSideRowModelModule,]);
|
|
|
+ModuleRegistry.registerModules([
|
|
|
+ AllCommunityModule,
|
|
|
+ TextFilterModule,
|
|
|
+ ClientSideRowModelModule,
|
|
|
+]);
|
|
|
|
|
|
-const SkeletonCellRenderer = (props: { value?: unknown }) => {
|
|
|
+const SkeletonCellRenderer = (props: { value?: ReactNode }) => {
|
|
|
if (!props.value) {
|
|
|
- return <Skeleton fill />;
|
|
|
+ return <div className={styles.defaultCellContainer}><div className={styles.skeletonContainer}><Skeleton fill /></div></div>;
|
|
|
}
|
|
|
- return <span>{props.value}</span>;
|
|
|
+ return <div className={styles.defaultCellContainer}>{props.value}</div>;
|
|
|
};
|
|
|
|
|
|
-export const TableGrid = forwardRef(<TData extends Record<string, unknown>>({
|
|
|
- rowData,
|
|
|
- colDefs,
|
|
|
- isLoading,
|
|
|
- cardProps,
|
|
|
- pagination,
|
|
|
- ...props
|
|
|
-}: TableGridProps<TData>, ref: React.Ref<AgGridReact<TData>>) => {
|
|
|
- const gridRef = useRef<AgGridReact<TData>>(null);
|
|
|
- const [pageSize, setPageSize] = useState(10);
|
|
|
- const [currentPage, setCurrentPage] = useState(1);
|
|
|
- const [totalPages, setTotalPages] = useState(1);
|
|
|
- useImperativeHandle(ref, () => gridRef.current);
|
|
|
-
|
|
|
- const defaultColDef = useMemo(() => {
|
|
|
- return {
|
|
|
- cellRenderer: SkeletonCellRenderer,
|
|
|
- flex: 1,
|
|
|
- };
|
|
|
- }, []);
|
|
|
+export const TableGrid = forwardRef(
|
|
|
+ <TData extends Record<string, unknown>>(
|
|
|
+ {
|
|
|
+ rowData,
|
|
|
+ colDefs,
|
|
|
+ isLoading,
|
|
|
+ cardProps,
|
|
|
+ pagination,
|
|
|
+ ...props
|
|
|
+ }: TableGridProps<TData>,
|
|
|
+ ref: React.Ref<AgGridReact<TData> | null>,
|
|
|
+ ) => {
|
|
|
+ const gridRef = useRef<AgGridReact<TData>>(null);
|
|
|
+ const [pageSize, setPageSize] = useState(10);
|
|
|
+ const [currentPage, setCurrentPage] = useState(1);
|
|
|
+ const [totalPages, setTotalPages] = useState(1);
|
|
|
+ useImperativeHandle(ref, () => gridRef.current);
|
|
|
|
|
|
- const isLargeScreen = useMediaQueryBreakpoint("md");
|
|
|
- useEffect(() => {
|
|
|
- if(!gridRef.current?.api) return;
|
|
|
- gridRef.current.api.redrawRows();
|
|
|
- gridRef.current.api.resetRowHeights()
|
|
|
- gridRef.current.api.onRowHeightChanged();
|
|
|
- }, [isLargeScreen]);
|
|
|
-
|
|
|
- const mappedColDefs = useMemo(() => {
|
|
|
- return colDefs.map((colDef) => {
|
|
|
+ const defaultColDef = useMemo(() => {
|
|
|
return {
|
|
|
- ...colDef,
|
|
|
- cellRenderer: isLoading ? SkeletonCellRenderer : colDef.cellRenderer,
|
|
|
+ cellRenderer: SkeletonCellRenderer,
|
|
|
+ flex: 1,
|
|
|
};
|
|
|
- });
|
|
|
- }, [colDefs, isLoading]);
|
|
|
+ }, []);
|
|
|
|
|
|
- const fullWidthCellRendererComponent = useMemo(() => FullWidthCellRenderer(colDefs), [colDefs]);
|
|
|
-
|
|
|
- const onPaginationChanged = useCallback(() => {
|
|
|
- if (gridRef.current?.api) {
|
|
|
- const api = gridRef.current.api;
|
|
|
- setPageSize(api.paginationGetPageSize());
|
|
|
- setCurrentPage(api.paginationGetCurrentPage() + 1);
|
|
|
- setTotalPages(api.paginationGetTotalPages());
|
|
|
- }
|
|
|
- }, []);
|
|
|
- const onPageChange = useCallback((newPage: number) => {
|
|
|
- gridRef.current?.api.paginationGoToPage(newPage - 1);
|
|
|
- }, []);
|
|
|
- const tableGrid = (
|
|
|
+ const mappedColDefs = useMemo(() => {
|
|
|
+ return colDefs.map((colDef) => {
|
|
|
+ return {
|
|
|
+ ...colDef,
|
|
|
+ // the types in ag-grid are `any` for the cellRenderers
|
|
|
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
|
+ cellRenderer: isLoading
|
|
|
+ ? (colDef.loadingCellRenderer ?? SkeletonCellRenderer)
|
|
|
+ : colDef.cellRenderer,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }, [colDefs, isLoading]);
|
|
|
+
|
|
|
+ const onPaginationChanged = useCallback(() => {
|
|
|
+ if (gridRef.current?.api) {
|
|
|
+ const api = gridRef.current.api;
|
|
|
+ setPageSize(api.paginationGetPageSize());
|
|
|
+ setCurrentPage(api.paginationGetCurrentPage() + 1);
|
|
|
+ setTotalPages(api.paginationGetTotalPages());
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+ const onPageChange = useCallback((newPage: number) => {
|
|
|
+ gridRef.current?.api.paginationGoToPage(newPage - 1);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const tableGrid = (
|
|
|
<AgGridReact<TData>
|
|
|
className={styles.tableGrid}
|
|
|
ref={gridRef}
|
|
|
@@ -87,40 +96,35 @@ export const TableGrid = forwardRef(<TData extends Record<string, unknown>>({
|
|
|
columnDefs={mappedColDefs}
|
|
|
theme={themeQuartz}
|
|
|
domLayout="autoHeight"
|
|
|
- fullWidthCellRenderer={fullWidthCellRendererComponent}
|
|
|
- getRowHeight={() => {
|
|
|
- if (!isLargeScreen) {
|
|
|
- return 100;
|
|
|
- }
|
|
|
- }}
|
|
|
- isFullWidthRow={() => !isLargeScreen} pagination={pagination ?? false}
|
|
|
+ pagination={pagination ?? false}
|
|
|
paginationPageSize={pageSize}
|
|
|
suppressPaginationPanel
|
|
|
onPaginationChanged={onPaginationChanged}
|
|
|
{...props}
|
|
|
/>
|
|
|
- );
|
|
|
- if (!cardProps && !pagination) {
|
|
|
- return tableGrid;
|
|
|
- }
|
|
|
- return (
|
|
|
- <Card
|
|
|
- footer={
|
|
|
- pagination && (
|
|
|
- <Paginator
|
|
|
- numPages={totalPages}
|
|
|
- currentPage={currentPage}
|
|
|
- onPageChange={onPageChange}
|
|
|
- pageSize={pageSize}
|
|
|
- onPageSizeChange={setPageSize}
|
|
|
- />
|
|
|
- )
|
|
|
- }
|
|
|
- {...cardProps}
|
|
|
- >
|
|
|
- {tableGrid}
|
|
|
- </Card>
|
|
|
- );
|
|
|
-});
|
|
|
+ );
|
|
|
+ if (!cardProps && !pagination) {
|
|
|
+ return tableGrid;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Card
|
|
|
+ footer={
|
|
|
+ pagination && (
|
|
|
+ <Paginator
|
|
|
+ numPages={totalPages}
|
|
|
+ currentPage={currentPage}
|
|
|
+ onPageChange={onPageChange}
|
|
|
+ pageSize={pageSize}
|
|
|
+ onPageSizeChange={setPageSize}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+ {...cardProps}
|
|
|
+ >
|
|
|
+ {tableGrid}
|
|
|
+ </Card>
|
|
|
+ );
|
|
|
+ },
|
|
|
+);
|
|
|
|
|
|
TableGrid.displayName = "TableGrid";
|
Alexandru Cambose