Add infinite table defaults
This commit is contained in:
parent
b569ec31ae
commit
9b1f4e7154
4 changed files with 9 additions and 88 deletions
|
@ -407,11 +407,15 @@ export const VirtualTable = forwardRef(
|
||||||
<AgGridReact
|
<AgGridReact
|
||||||
ref={mergedRef}
|
ref={mergedRef}
|
||||||
animateRows
|
animateRows
|
||||||
|
maintainColumnOrder
|
||||||
suppressContextMenu
|
suppressContextMenu
|
||||||
suppressCopyRowsToClipboard
|
suppressCopyRowsToClipboard
|
||||||
suppressMoveWhenRowDragging
|
suppressMoveWhenRowDragging
|
||||||
suppressPaginationPanel
|
suppressPaginationPanel
|
||||||
suppressScrollOnNewData
|
suppressScrollOnNewData
|
||||||
|
blockLoadDebounceMillis={200}
|
||||||
|
cacheBlockSize={300}
|
||||||
|
cacheOverflowSize={1}
|
||||||
defaultColDef={defaultColumnDefs}
|
defaultColDef={defaultColumnDefs}
|
||||||
enableCellChangeFlash={false}
|
enableCellChangeFlash={false}
|
||||||
headerHeight={36}
|
headerHeight={36}
|
||||||
|
|
|
@ -77,14 +77,6 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
|
||||||
[page.table.columns],
|
[page.table.columns],
|
||||||
);
|
);
|
||||||
|
|
||||||
const defaultColumnDefs: ColDef = useMemo(() => {
|
|
||||||
return {
|
|
||||||
lockPinned: true,
|
|
||||||
lockVisible: true,
|
|
||||||
resizable: true,
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onTableReady = useCallback(
|
const onTableReady = useCallback(
|
||||||
(params: GridReadyEvent) => {
|
(params: GridReadyEvent) => {
|
||||||
const dataSource: IDatasource = {
|
const dataSource: IDatasource = {
|
||||||
|
@ -141,12 +133,6 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
|
||||||
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleTableSizeChange = () => {
|
|
||||||
if (page.table.autoFit) {
|
|
||||||
tableRef?.current?.api.sizeColumnsToFit();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTableColumnChange = useCallback(() => {
|
const handleTableColumnChange = useCallback(() => {
|
||||||
const { columnApi } = tableRef?.current || {};
|
const { columnApi } = tableRef?.current || {};
|
||||||
const columnsOrder = columnApi?.getAllGridColumns();
|
const columnsOrder = columnApi?.getAllGridColumns();
|
||||||
|
@ -350,34 +336,22 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
|
||||||
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
||||||
ref={tableRef}
|
ref={tableRef}
|
||||||
alwaysShowHorizontalScroll
|
alwaysShowHorizontalScroll
|
||||||
animateRows
|
autoFitColumns={page.table.autoFit}
|
||||||
maintainColumnOrder
|
|
||||||
suppressCopyRowsToClipboard
|
|
||||||
suppressMoveWhenRowDragging
|
|
||||||
suppressPaginationPanel
|
|
||||||
suppressRowDrag
|
|
||||||
suppressScrollOnNewData
|
|
||||||
blockLoadDebounceMillis={200}
|
blockLoadDebounceMillis={200}
|
||||||
cacheBlockSize={500}
|
|
||||||
cacheOverflowSize={1}
|
|
||||||
columnDefs={columnDefs}
|
columnDefs={columnDefs}
|
||||||
defaultColDef={defaultColumnDefs}
|
|
||||||
enableCellChangeFlash={false}
|
|
||||||
getRowId={(data) => data.data.id}
|
getRowId={(data) => data.data.id}
|
||||||
infiniteInitialRowCount={checkAlbumList.data?.totalRecordCount || 100}
|
infiniteInitialRowCount={checkAlbumList.data?.totalRecordCount || 1}
|
||||||
pagination={isPaginationEnabled}
|
pagination={isPaginationEnabled}
|
||||||
paginationAutoPageSize={isPaginationEnabled}
|
paginationAutoPageSize={isPaginationEnabled}
|
||||||
paginationPageSize={page.table.pagination.itemsPerPage || 100}
|
paginationPageSize={page.table.pagination.itemsPerPage || 100}
|
||||||
rowBuffer={20}
|
rowBuffer={20}
|
||||||
rowHeight={page.table.rowHeight || 40}
|
rowHeight={page.table.rowHeight || 40}
|
||||||
rowModelType="infinite"
|
rowModelType="infinite"
|
||||||
rowSelection="multiple"
|
|
||||||
onBodyScrollEnd={handleTableScroll}
|
onBodyScrollEnd={handleTableScroll}
|
||||||
onCellContextMenu={handleContextMenu}
|
onCellContextMenu={handleContextMenu}
|
||||||
onColumnMoved={handleTableColumnChange}
|
onColumnMoved={handleTableColumnChange}
|
||||||
onColumnResized={debouncedTableColumnChange}
|
onColumnResized={debouncedTableColumnChange}
|
||||||
onGridReady={onTableReady}
|
onGridReady={onTableReady}
|
||||||
onGridSizeChanged={handleTableSizeChange}
|
|
||||||
onPaginationChanged={onTablePaginationChanged}
|
onPaginationChanged={onTablePaginationChanged}
|
||||||
onRowDoubleClicked={handleRowDoubleClick}
|
onRowDoubleClicked={handleRowDoubleClick}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -82,14 +82,6 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
|
||||||
[page.table.columns],
|
[page.table.columns],
|
||||||
);
|
);
|
||||||
|
|
||||||
const defaultColumnDefs: ColDef = useMemo(() => {
|
|
||||||
return {
|
|
||||||
lockPinned: true,
|
|
||||||
lockVisible: true,
|
|
||||||
resizable: true,
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onTableReady = useCallback(
|
const onTableReady = useCallback(
|
||||||
(params: GridReadyEvent) => {
|
(params: GridReadyEvent) => {
|
||||||
const dataSource: IDatasource = {
|
const dataSource: IDatasource = {
|
||||||
|
@ -150,12 +142,6 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
|
||||||
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleTableSizeChange = () => {
|
|
||||||
if (page.table.autoFit) {
|
|
||||||
tableRef?.current?.api.sizeColumnsToFit();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTableColumnChange = useCallback(() => {
|
const handleTableColumnChange = useCallback(() => {
|
||||||
const { columnApi } = tableRef?.current || {};
|
const { columnApi } = tableRef?.current || {};
|
||||||
const columnsOrder = columnApi?.getAllGridColumns();
|
const columnsOrder = columnApi?.getAllGridColumns();
|
||||||
|
@ -331,34 +317,20 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
|
||||||
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
||||||
ref={tableRef}
|
ref={tableRef}
|
||||||
alwaysShowHorizontalScroll
|
alwaysShowHorizontalScroll
|
||||||
animateRows
|
autoFitColumns={page.table.autoFit}
|
||||||
maintainColumnOrder
|
|
||||||
suppressCopyRowsToClipboard
|
|
||||||
suppressMoveWhenRowDragging
|
|
||||||
suppressPaginationPanel
|
|
||||||
suppressRowDrag
|
|
||||||
suppressScrollOnNewData
|
|
||||||
blockLoadDebounceMillis={200}
|
|
||||||
cacheBlockSize={500}
|
|
||||||
cacheOverflowSize={1}
|
|
||||||
columnDefs={columnDefs}
|
columnDefs={columnDefs}
|
||||||
defaultColDef={defaultColumnDefs}
|
|
||||||
enableCellChangeFlash={false}
|
|
||||||
getRowId={(data) => data.data.id}
|
getRowId={(data) => data.data.id}
|
||||||
infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 100}
|
infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 1}
|
||||||
pagination={isPaginationEnabled}
|
pagination={isPaginationEnabled}
|
||||||
paginationAutoPageSize={isPaginationEnabled}
|
paginationAutoPageSize={isPaginationEnabled}
|
||||||
paginationPageSize={page.table.pagination.itemsPerPage || 100}
|
paginationPageSize={page.table.pagination.itemsPerPage || 100}
|
||||||
rowBuffer={20}
|
|
||||||
rowHeight={page.table.rowHeight || 40}
|
rowHeight={page.table.rowHeight || 40}
|
||||||
rowModelType="infinite"
|
rowModelType="infinite"
|
||||||
rowSelection="multiple"
|
|
||||||
onBodyScrollEnd={handleTableScroll}
|
onBodyScrollEnd={handleTableScroll}
|
||||||
onCellContextMenu={handleContextMenu}
|
onCellContextMenu={handleContextMenu}
|
||||||
onColumnMoved={handleTableColumnChange}
|
onColumnMoved={handleTableColumnChange}
|
||||||
onColumnResized={debouncedTableColumnChange}
|
onColumnResized={debouncedTableColumnChange}
|
||||||
onGridReady={onTableReady}
|
onGridReady={onTableReady}
|
||||||
onGridSizeChanged={handleTableSizeChange}
|
|
||||||
onPaginationChanged={onTablePaginationChanged}
|
onPaginationChanged={onTablePaginationChanged}
|
||||||
onRowDoubleClicked={handleRowDoubleClick}
|
onRowDoubleClicked={handleRowDoubleClick}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -81,14 +81,6 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
|
||||||
[page.table.columns],
|
[page.table.columns],
|
||||||
);
|
);
|
||||||
|
|
||||||
const defaultColumnDefs: ColDef = useMemo(() => {
|
|
||||||
return {
|
|
||||||
lockPinned: true,
|
|
||||||
lockVisible: true,
|
|
||||||
resizable: true,
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onGridReady = useCallback(
|
const onGridReady = useCallback(
|
||||||
(params: GridReadyEvent) => {
|
(params: GridReadyEvent) => {
|
||||||
const dataSource: IDatasource = {
|
const dataSource: IDatasource = {
|
||||||
|
@ -153,12 +145,6 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleGridSizeChange = () => {
|
|
||||||
if (page.table.autoFit) {
|
|
||||||
tableRef?.current?.api.sizeColumnsToFit();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleColumnChange = useCallback(() => {
|
const handleColumnChange = useCallback(() => {
|
||||||
const { columnApi } = tableRef?.current || {};
|
const { columnApi } = tableRef?.current || {};
|
||||||
const columnsOrder = columnApi?.getAllGridColumns();
|
const columnsOrder = columnApi?.getAllGridColumns();
|
||||||
|
@ -230,34 +216,19 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
|
||||||
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
||||||
ref={tableRef}
|
ref={tableRef}
|
||||||
alwaysShowHorizontalScroll
|
alwaysShowHorizontalScroll
|
||||||
animateRows
|
|
||||||
maintainColumnOrder
|
|
||||||
suppressCopyRowsToClipboard
|
|
||||||
suppressMoveWhenRowDragging
|
|
||||||
suppressPaginationPanel
|
|
||||||
suppressRowDrag
|
|
||||||
suppressScrollOnNewData
|
|
||||||
blockLoadDebounceMillis={200}
|
|
||||||
cacheBlockSize={500}
|
|
||||||
cacheOverflowSize={1}
|
|
||||||
columnDefs={columnDefs}
|
columnDefs={columnDefs}
|
||||||
defaultColDef={defaultColumnDefs}
|
|
||||||
enableCellChangeFlash={false}
|
|
||||||
getRowId={(data) => data.data.uniqueId}
|
getRowId={(data) => data.data.uniqueId}
|
||||||
infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
|
infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 1}
|
||||||
pagination={isPaginationEnabled}
|
pagination={isPaginationEnabled}
|
||||||
paginationAutoPageSize={isPaginationEnabled}
|
paginationAutoPageSize={isPaginationEnabled}
|
||||||
paginationPageSize={pagination.itemsPerPage || 100}
|
paginationPageSize={pagination.itemsPerPage || 100}
|
||||||
rowBuffer={20}
|
|
||||||
rowHeight={page.table.rowHeight || 40}
|
rowHeight={page.table.rowHeight || 40}
|
||||||
rowModelType="infinite"
|
rowModelType="infinite"
|
||||||
rowSelection="multiple"
|
|
||||||
onBodyScrollEnd={handleScroll}
|
onBodyScrollEnd={handleScroll}
|
||||||
onCellContextMenu={handleContextMenu}
|
onCellContextMenu={handleContextMenu}
|
||||||
onColumnMoved={handleColumnChange}
|
onColumnMoved={handleColumnChange}
|
||||||
onColumnResized={debouncedColumnChange}
|
onColumnResized={debouncedColumnChange}
|
||||||
onGridReady={onGridReady}
|
onGridReady={onGridReady}
|
||||||
onGridSizeChanged={handleGridSizeChange}
|
|
||||||
onPaginationChanged={onPaginationChanged}
|
onPaginationChanged={onPaginationChanged}
|
||||||
onRowDoubleClicked={handleRowDoubleClick}
|
onRowDoubleClicked={handleRowDoubleClick}
|
||||||
/>
|
/>
|
||||||
|
|
Reference in a new issue