fix(table): table ui fixes (#33494)

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com>
This commit is contained in:
amaannawab923
2025-05-18 02:18:49 +05:30
committed by GitHub
parent af21ef2497
commit 217f11a8f7
6 changed files with 157 additions and 27 deletions

View File

@@ -113,6 +113,10 @@ const StyledSpace = styled(Space)`
}
`;
const StyledRow = styled.div`
display: flex;
`;
// Be sure to pass our updateMyData and the skipReset option
export default typedMemo(function DataTable<D extends object>({
tableClassName,
@@ -447,9 +451,9 @@ export default typedMemo(function DataTable<D extends object>({
>
{hasGlobalControl ? (
<div ref={globalControlRef} className="form-inline dt-controls">
<div className="row">
<StyledRow className="row">
<div
className={renderTimeComparisonDropdown ? 'col-sm-5' : 'col-sm-6'}
className={renderTimeComparisonDropdown ? 'col-sm-4' : 'col-sm-5'}
>
{hasPagination ? (
<SelectPageSize
@@ -466,7 +470,11 @@ export default typedMemo(function DataTable<D extends object>({
) : null}
</div>
{searchInput ? (
<StyledSpace className="col-sm-6">
<StyledSpace
className={
renderTimeComparisonDropdown ? 'col-sm-7' : 'col-sm-8'
}
>
{serverPagination && (
<div className="search-select-container">
<span className="search-by-label">Search by: </span>
@@ -500,7 +508,7 @@ export default typedMemo(function DataTable<D extends object>({
{renderTimeComparisonDropdown()}
</div>
) : null}
</div>
</StyledRow>
</div>
) : null}
{wrapStickyTable ? wrapStickyTable(renderTable) : renderTable()}

View File

@@ -79,7 +79,7 @@ import DataTable, {
import Styles from './Styles';
import { formatColumnValue } from './utils/formatValue';
import { PAGE_SIZE_OPTIONS } from './consts';
import { PAGE_SIZE_OPTIONS, SERVER_PAGE_SIZE_OPTIONS } from './consts';
import { updateTableOwnState } from './DataTable/utils/externalAPIs';
import getScrollBarSize from './DataTable/utils/getScrollBarSize';
@@ -306,7 +306,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
// only take relevant page size options
const pageSizeOptions = useMemo(() => {
const getServerPagination = (n: number) => n <= rowCount;
return PAGE_SIZE_OPTIONS.filter(([n]) =>
return (
serverPagination ? SERVER_PAGE_SIZE_OPTIONS : PAGE_SIZE_OPTIONS
).filter(([n]) =>
serverPagination ? getServerPagination(n) : n <= 2 * data.length,
) as SizeOption[];
}, [data.length, rowCount, serverPagination]);

View File

@@ -30,3 +30,7 @@ export const PAGE_SIZE_OPTIONS = formatSelectOptions<number>([
100,
200,
]);
export const SERVER_PAGE_SIZE_OPTIONS = formatSelectOptions<number>([
10, 20, 50, 100, 200,
]);

View File

@@ -54,7 +54,7 @@ import {
} from '@superset-ui/core';
import { isEmpty, last } from 'lodash';
import { PAGE_SIZE_OPTIONS } from './consts';
import { PAGE_SIZE_OPTIONS, SERVER_PAGE_SIZE_OPTIONS } from './consts';
import { ColorSchemeEnum } from './types';
function getQueryMode(controls: ControlStateMapping): QueryMode {
@@ -364,7 +364,7 @@ const config: ControlPanelConfig = {
freeForm: true,
label: t('Server Page Length'),
default: 10,
choices: PAGE_SIZE_OPTIONS,
choices: SERVER_PAGE_SIZE_OPTIONS,
description: t('Rows per page, 0 means no pagination'),
visibility: ({ controls }: ControlPanelsContainerProps) =>
Boolean(controls?.server_pagination?.value),
@@ -397,6 +397,7 @@ const config: ControlPanelConfig = {
v,
state?.server_pagination,
state?.maxValueWithoutServerPagination || DEFAULT_MAX_ROW,
state?.maxValue || DEFAULT_MAX_ROW_TABLE_SERVER,
),
],
// Re run the validations when this control value