Skip to content

Commit 11a3591

Browse files
lewis-sanchezlewis-sanchez
authored
Move total rows drop down and let users specify total number of rows to fetch (#20500)
* Move row fetch controls to toolbar * Make the combo box editable
1 parent 77435a8 commit 11a3591

File tree

4 files changed

+74
-79
lines changed

4 files changed

+74
-79
lines changed

‎src/reactviews/pages/TableExplorer/TableDataGrid.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,11 @@ export const TableDataGrid = forwardRef<TableDataGridRef, TableDataGridProps>(
5454
resultSet,
5555
themeKind,
5656
pageSize = 100,
57-
currentRowCount,
5857
failedCells,
5958
onDeleteRow,
6059
onUpdateCell,
6160
onRevertCell,
6261
onRevertRow,
63-
onLoadSubset,
6462
onCellChangeCountChanged,
6563
onDeletionCountChanged,
6664
},
@@ -79,18 +77,13 @@ export const TableDataGrid = forwardRef<TableDataGridRef, TableDataGridProps>(
7977
const previousResultSetRef = useRef<EditSubsetResult | undefined>(undefined);
8078
const isInitializedRef = useRef<boolean>(false);
8179

82-
// Create a custom pager component with bound props
80+
// Create a custom pager component
8381
const BoundCustomPager = useMemo(
8482
() =>
8583
React.forwardRef<any, any>((pagerProps, pagerRef) => (
86-
<TableExplorerCustomPager
87-
ref={pagerRef}
88-
{...pagerProps}
89-
currentRowCount={currentRowCount}
90-
onLoadSubset={onLoadSubset}
91-
/>
84+
<TableExplorerCustomPager ref={pagerRef} {...pagerProps} />
9285
)),
93-
[currentRowCount, onLoadSubset],
86+
[],
9487
);
9588

9689
function reactGridReady(reactGrid: SlickgridReactInstance) {

‎src/reactviews/pages/TableExplorer/TableExplorerCustomPager.tsx‎

Lines changed: 2 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,14 @@ import {
1616
ChevronRightRegular,
1717
ChevronDoubleLeftRegular,
1818
ChevronDoubleRightRegular,
19-
ArrowSyncRegular,
2019
} from "@fluentui/react-icons";
21-
import { Dropdown, Option, Combobox, Button } from "@fluentui/react-components";
20+
import { Dropdown, Option } from "@fluentui/react-components";
2221

2322
import "./TableExplorerCustomPager.css";
2423
import { locConstants as loc } from "../../common/locConstants";
2524

2625
// Default pagination constants
2726
const DEFAULT_PAGE_SIZE = 100;
28-
const DEFAULT_ROW_COUNT = 100;
2927
const MIN_VALID_NUMBER = 1;
3028
const FIRST_PAGE_NUMBER = 1;
3129
const RADIX_DECIMAL = 10;
@@ -40,23 +38,13 @@ export interface TableExplorerCustomPagerRef {
4038
renderPagination: () => void;
4139
}
4240

43-
export interface TableExplorerCustomPagerProps {
44-
currentRowCount?: number;
45-
onLoadSubset?: (rowCount: number) => void;
46-
}
47-
48-
const TableExplorerCustomPager = React.forwardRef<
49-
TableExplorerCustomPagerRef,
50-
TableExplorerCustomPagerProps
51-
>((props, ref) => {
52-
const { currentRowCount, onLoadSubset } = props;
41+
const TableExplorerCustomPager = React.forwardRef<TableExplorerCustomPagerRef>((_, ref) => {
5342
const [currentPagination, setCurrentPagination] = useState<PaginationMetadata>(
5443
{} as PaginationMetadata,
5544
);
5645
const [isLeftPaginationDisabled, setIsLeftPaginationDisabled] = useState(false);
5746
const [isRightPaginationDisabled, setIsRightPaginationDisabled] = useState(false);
5847
const [selectedPageSize, setSelectedPageSize] = useState<string>(String(DEFAULT_PAGE_SIZE));
59-
const [selectedRowCount, setSelectedRowCount] = useState<string>(String(DEFAULT_ROW_COUNT));
6048

6149
const paginationElementRef = useRef<HTMLDivElement | null>(null);
6250
const gridRef = useRef<SlickGrid | null>(null);
@@ -149,41 +137,12 @@ const TableExplorerCustomPager = React.forwardRef<
149137
}
150138
};
151139

152-
const onRowCountChanged = (_event: any, data: any) => {
153-
const newRowCount = data.optionValue || data.value || selectedRowCount;
154-
if (newRowCount) {
155-
setSelectedRowCount(newRowCount);
156-
}
157-
};
158-
159-
const onRowCountInput = (event: React.ChangeEvent<HTMLInputElement>) => {
160-
const newValue = event.target.value;
161-
setSelectedRowCount(newValue);
162-
};
163-
164-
const onFetchRowsClick = () => {
165-
const rowCountNumber = parseInt(
166-
selectedRowCount || String(DEFAULT_ROW_COUNT),
167-
RADIX_DECIMAL,
168-
);
169-
170-
if (!isNaN(rowCountNumber) && rowCountNumber >= MIN_VALID_NUMBER && onLoadSubset) {
171-
onLoadSubset(rowCountNumber);
172-
}
173-
};
174-
175140
useEffect(() => {
176141
return () => {
177142
dispose();
178143
};
179144
}, []);
180145

181-
useEffect(() => {
182-
if (currentRowCount !== undefined) {
183-
setSelectedRowCount(String(currentRowCount));
184-
}
185-
}, [currentRowCount]);
186-
187146
// Expose methods via ref
188147
useImperativeHandle(ref, () => ({
189148
init,
@@ -193,30 +152,6 @@ const TableExplorerCustomPager = React.forwardRef<
193152

194153
return (
195154
<div className="table-explorer-custom-pagination" ref={paginationElementRef}>
196-
<div className="row-count-selector">
197-
<span className="row-count-label">{loc.tableExplorer.totalRowsToFetch}</span>
198-
<Combobox
199-
value={selectedRowCount}
200-
selectedOptions={[selectedRowCount]}
201-
onOptionSelect={onRowCountChanged}
202-
onInput={onRowCountInput}
203-
size="small"
204-
freeform>
205-
<Option value="10">10</Option>
206-
<Option value="50">50</Option>
207-
<Option value="100">100</Option>
208-
<Option value="500">500</Option>
209-
<Option value="1000">1000</Option>
210-
</Combobox>
211-
<Button
212-
appearance="primary"
213-
size="small"
214-
icon={<ArrowSyncRegular />}
215-
onClick={onFetchRowsClick}
216-
title={loc.tableExplorer.fetchRows}
217-
aria-label={loc.tableExplorer.fetchRows}
218-
/>
219-
</div>
220155
<div className="page-size-selector">
221156
<span className="page-size-label">{loc.tableExplorer.rowsPerPage}</span>
222157
<Dropdown

‎src/reactviews/pages/TableExplorer/TableExplorerPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,8 @@ export const TableExplorerPage: React.FC = () => {
118118
onSaveComplete={handleSaveComplete}
119119
cellChangeCount={cellChangeCount}
120120
deletionCount={deletionCount}
121+
currentRowCount={currentRowCount}
122+
onLoadSubset={context?.loadSubset}
121123
/>
122124
{resultSet ? (
123125
<div className={classes.dataGridContainer}>

‎src/reactviews/pages/TableExplorer/TableExplorerToolbar.tsx‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import React from "react";
7-
import { Toolbar, ToolbarButton } from "@fluentui/react-components";
8-
import { SaveRegular, AddRegular, CodeRegular } from "@fluentui/react-icons";
7+
import { Toolbar, ToolbarButton, Combobox, Option, Button } from "@fluentui/react-components";
8+
import { SaveRegular, AddRegular, CodeRegular, ArrowSyncRegular } from "@fluentui/react-icons";
99
import { locConstants as loc } from "../../common/locConstants";
1010
import { useTableExplorerContext } from "./TableExplorerStateProvider";
1111
import { useTableExplorerSelector } from "./tableExplorerSelector";
@@ -15,20 +15,31 @@ interface TableExplorerToolbarProps {
1515
onSaveComplete?: () => void;
1616
cellChangeCount: number;
1717
deletionCount: number;
18+
currentRowCount?: number;
19+
onLoadSubset?: (rowCount: number) => void;
1820
}
1921

2022
export const TableExplorerToolbar: React.FC<TableExplorerToolbarProps> = ({
2123
onSaveComplete,
2224
cellChangeCount,
2325
deletionCount,
26+
currentRowCount,
27+
onLoadSubset,
2428
}) => {
2529
const context = useTableExplorerContext();
30+
const DEFAULT_ROW_COUNT = 100;
31+
const MIN_VALID_NUMBER = 1;
32+
const RADIX_DECIMAL = 10;
2633

2734
// Use selectors to access state
2835
const showScriptPane = useTableExplorerSelector((s) => s.showScriptPane);
2936
const loadStatus = useTableExplorerSelector((s) => s.loadStatus);
3037
const isLoading = loadStatus === ApiStatus.Loading;
3138

39+
const [selectedRowCount, setSelectedRowCount] = React.useState<string>(
40+
String(DEFAULT_ROW_COUNT),
41+
);
42+
3243
const handleSave = () => {
3344
context.commitChanges();
3445
// Call the callback to clear change tracking after save
@@ -41,6 +52,35 @@ export const TableExplorerToolbar: React.FC<TableExplorerToolbarProps> = ({
4152
context.createRow();
4253
};
4354

55+
const onRowCountChange = (event: any) => {
56+
const newValue = event.target.value;
57+
setSelectedRowCount(newValue);
58+
};
59+
60+
const onRowCountSelect = (_event: any, data: any) => {
61+
if (data.optionValue) {
62+
setSelectedRowCount(data.optionValue);
63+
}
64+
};
65+
66+
const onFetchRowsClick = () => {
67+
const rowCountNumber = parseInt(
68+
selectedRowCount || String(DEFAULT_ROW_COUNT),
69+
RADIX_DECIMAL,
70+
);
71+
72+
if (!isNaN(rowCountNumber) && rowCountNumber >= MIN_VALID_NUMBER && onLoadSubset) {
73+
onLoadSubset(rowCountNumber);
74+
}
75+
};
76+
77+
// Update selectedRowCount when currentRowCount prop changes
78+
React.useEffect(() => {
79+
if (currentRowCount !== undefined) {
80+
setSelectedRowCount(String(currentRowCount));
81+
}
82+
}, [currentRowCount]);
83+
4484
// Total changes includes both cell edits and row deletions
4585
const changeCount = cellChangeCount + deletionCount;
4686

@@ -83,6 +123,31 @@ export const TableExplorerToolbar: React.FC<TableExplorerToolbarProps> = ({
83123
disabled={isLoading}>
84124
{showScriptPane ? loc.tableExplorer.hideScript : loc.tableExplorer.showScript}
85125
</ToolbarButton>
126+
<div style={{ display: "flex", alignItems: "center", gap: "8px", marginLeft: "auto" }}>
127+
<span style={{ fontSize: "12px" }}>{loc.tableExplorer.totalRowsToFetch}</span>
128+
<Combobox
129+
value={selectedRowCount}
130+
onChange={onRowCountChange}
131+
onOptionSelect={onRowCountSelect}
132+
size="small"
133+
freeform
134+
disabled={isLoading}>
135+
<Option value="10">10</Option>
136+
<Option value="50">50</Option>
137+
<Option value="100">100</Option>
138+
<Option value="500">500</Option>
139+
<Option value="1000">1000</Option>
140+
</Combobox>
141+
<Button
142+
appearance="primary"
143+
size="small"
144+
icon={<ArrowSyncRegular />}
145+
onClick={onFetchRowsClick}
146+
title={loc.tableExplorer.fetchRows}
147+
aria-label={loc.tableExplorer.fetchRows}
148+
disabled={isLoading}
149+
/>
150+
</div>
86151
</Toolbar>
87152
);
88153
};

0 commit comments

Comments
 (0)