diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx index b23131b1b9217..bf072b3bb4634 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx @@ -70,6 +70,7 @@ export interface DataTableProps extends TableOptions { onColumnOrderChange: () => void; isRoundStyles?: boolean; roundChartTitle?: string; + showAllSizeOption?: boolean; } export interface RenderHTMLCellProps extends HTMLProps { diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx index 8b954a543386b..edc6ffe52738a 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx @@ -277,6 +277,7 @@ export default function TableChart( allowRearrangeColumns = false, onContextMenu, emitCrossFilters, + showAllSizeOption, } = props; const timestampFormatter = useCallback( value => getTimeFormatterForGranularity(timeGrain)(value), @@ -293,10 +294,12 @@ export default function TableChart( // only take relevant page size options const pageSizeOptions = useMemo(() => { const getServerPagination = (n: number) => n <= rowCount; - return PAGE_SIZE_OPTIONS.filter(([n]) => + return PAGE_SIZE_OPTIONS.filter(item => + !showAllSizeOption ? item[0] !== 0 : showAllSizeOption, + ).filter(([n]) => serverPagination ? getServerPagination(n) : n <= 2 * data.length, ) as SizeOption[]; - }, [data.length, rowCount, serverPagination]); + }, [data.length, rowCount, serverPagination, showAllSizeOption]); const getValueRange = useCallback( function getValueRange(key: string, alignPositiveNegative: boolean) { @@ -788,7 +791,7 @@ export default function TableChart( )} isRoundStyles={isRoundStyles} roundChartTitle={roundChartTitle} - pageSize={pageSize} + pageSize={showAllSizeOption ? pageSize : pageSize === 0 ? 10 : pageSize} serverPaginationData={serverPaginationData} pageSizeOptions={pageSizeOptions} width={fullDisplay ? '100%' : widthFromState} @@ -798,6 +801,7 @@ export default function TableChart( onColumnOrderChange={() => setColumnOrderToggle(!columnOrderToggle)} maxPageItemCount={5} noResults={getNoResultsMessage} + showAllSizeOption={showAllSizeOption} searchInput={includeSearch && SelectedSearchInput} selectPageSize={pageSize !== null && SelectPageSize} // not in use in Superset, but needed for unit tests diff --git a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx index 1e4687d1319a7..b44e0e984ff2f 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx @@ -145,6 +145,25 @@ const percentMetricsControl: typeof sharedControls.metrics = { const config: ControlPanelConfig = { controlPanelSections: [ + { + label: t('Table Options'), + expanded: true, + controlSetRows: [ + [ + { + name: 'showAllSizeOption', + config: { + type: 'CheckboxControl', + label: 'Show select all size option', + renderTrigger: true, + default: false, + initialValue: false, + description: 'Show select all size option', + }, + }, + ], + ], + }, { label: t('Show Loader'), expanded: true, diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts index 754e8ff7d6a97..4c1f689754f31 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts @@ -242,6 +242,7 @@ const transformProps = ( show_totals: showTotals, conditional_formatting: conditionalFormatting, allow_rearrange_columns: allowRearrangeColumns, + showAllSizeOption, } = formData; const timeGrain = extractTimegrain(formData); @@ -300,6 +301,7 @@ const transformProps = ( timeGrain, allowRearrangeColumns, onContextMenu, + showAllSizeOption: !!showAllSizeOption, }; }; diff --git a/superset-frontend/plugins/plugin-chart-table/src/types.ts b/superset-frontend/plugins/plugin-chart-table/src/types.ts index 2b29b37c66ed3..9db5f54d96c02 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/types.ts +++ b/superset-frontend/plugins/plugin-chart-table/src/types.ts @@ -80,6 +80,7 @@ export type TableChartFormData = QueryFormData & { include_search?: boolean; query_mode?: QueryMode; showPopUpLegend?: boolean; + showAllSizeOption?: boolean; showPopUpVideoLegend?: boolean; page_length?: string | number | null; // null means auto-paginate metrics?: QueryFormMetric[] | null; @@ -131,6 +132,7 @@ export interface TableChartTransformedProps { noMainBorder?: boolean; hideControlsOnCustomerView?: boolean; isRoundStyles?: boolean; + showAllSizeOption?: boolean; roundChartTitle?: string; // These are dashboard filters, don't be confused with in-chart search filter // enabled by `includeSearch`