antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add stickyHeader prop to table component

Browse source
This commit is contained in:
jeffvli 2023-07-21 17:53:54 -07:00
parent 92d7560362
commit 9d18384b2d
2 changed files with 93 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/renderer/components/virtual-table/index.tsx
View file

@ -35,6 +35,7 @@ import { RatingCell } from '/@/renderer/components/virtual-table/cells/rating-ce
import { TablePagination } from '/@/renderer/components/virtual-table/table-pagination';
import { ActionsCell } from '/@/renderer/components/virtual-table/cells/actions-cell';
import { TitleCell } from '/@/renderer/components/virtual-table/cells/title-cell';
import { useFixedTableHeader } from '/@/renderer/components/virtual-table/hooks/use-fixed-table-header';
export * from './table-config-dropdown';
export * from './table-pagination';
@ -43,12 +44,18 @@ export * from './hooks/use-click-outside-deselect';
export * from './utils';
const TableWrapper = styled.div`
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
`;
const DummyHeader = styled.div<{ height?: number }>`
position: absolute;
height: ${({ height }) => height || 36}px};
`;
dayjs.extend(relativeTime);
const tableColumns: { [key: string]: ColDef } = {
@ -371,6 +378,7 @@ export interface VirtualTableProps extends AgGridReactProps {
pagination: TablePaginationType;
setPagination: any;
};
stickyHeader?: boolean;
transparentHeader?: boolean;
}
@ -380,6 +388,7 @@ export const VirtualTable = forwardRef(
autoFitColumns,
deselectOnClickOutside,
autoHeight,
stickyHeader,
transparentHeader,
onColumnMoved,
onNewColumnsLoaded,
@ -467,55 +476,60 @@ export const VirtualTable = forwardRef(
[autoFitColumns],
);
const { tableHeaderRef, tableContainerRef } = useFixedTableHeader({
enabled: stickyHeader || false,
});
const mergedWrapperRef = useMergedRef(deselectRef, tableContainerRef);
return (
<>
<TableWrapper
ref={deselectRef}
className={
transparentHeader
? 'ag-header-transparent ag-theme-alpine-dark'
: 'ag-theme-alpine-dark'
}
>
<AgGridReact
ref={mergedRef}
animateRows
maintainColumnOrder
suppressAsyncEvents
suppressContextMenu
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressScrollOnNewData
blockLoadDebounceMillis={200}
cacheBlockSize={300}
cacheOverflowSize={1}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
headerHeight={36}
rowBuffer={30}
rowSelection="multiple"
{...rest}
onColumnMoved={handleColumnMoved}
onGridReady={handleGridReady}
onGridSizeChanged={handleGridSizeChanged}
onModelUpdated={handleModelUpdated}
onNewColumnsLoaded={handleNewColumnsLoaded}
/>
{paginationProps && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
<TablePagination
{...paginationProps}
tableRef={tableRef}
/>
</AnimatePresence>
)}
</TableWrapper>
</>
<TableWrapper
ref={mergedWrapperRef}
className={
transparentHeader
? 'ag-theme-alpine-dark ag-header-transparent'
: 'ag-theme-alpine-dark'
}
>
<DummyHeader ref={tableHeaderRef} />
<AgGridReact
ref={mergedRef}
animateRows
maintainColumnOrder
suppressAsyncEvents
suppressContextMenu
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressScrollOnNewData
blockLoadDebounceMillis={200}
cacheBlockSize={300}
cacheOverflowSize={1}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
headerHeight={36}
rowBuffer={30}
rowSelection="multiple"
{...rest}
onColumnMoved={handleColumnMoved}
onGridReady={handleGridReady}
onGridSizeChanged={handleGridSizeChanged}
onModelUpdated={handleModelUpdated}
onNewColumnsLoaded={handleNewColumnsLoaded}
/>
{paginationProps && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
<TablePagination
{...paginationProps}
tableRef={tableRef}
/>
</AnimatePresence>
)}
</TableWrapper>
);
},
);