diff --git a/webview/src/experiments/components/App.test.tsx b/webview/src/experiments/components/App.test.tsx index 5d0deeeaee..f9a7fbd80f 100644 --- a/webview/src/experiments/components/App.test.tsx +++ b/webview/src/experiments/components/App.test.tsx @@ -25,6 +25,7 @@ import { vsCodeApi } from '../../shared/api' import { commonColumnFields, expectHeaders, + getHeaders, tableData as sortingTableDataFixture } from '../../test/sort' import { @@ -164,6 +165,30 @@ describe('App', () => { await expectHeaders(['A', 'C', 'D', 'B']) }) + it('should be able to move columns to the start', async () => { + renderTable({ + ...sortingTableDataFixture, + columnOrder: ['id', 'Created', 'params:A', 'params:B', 'params:C'] + }) + + await expectHeaders(['A', 'B', 'C']) + + const moveBCtoStart = ['id', 'params:B', 'params:C', 'Created', 'params:A'] + + setTableData({ + ...sortingTableDataFixture, + columnOrder: moveBCtoStart + }) + + expect(await getHeaders()).toStrictEqual([ + 'Experiment', + 'B', + 'C', + 'Created', + 'A' + ]) + }) + describe('Row expansion', () => { const experimentLabel = '4fb124a' diff --git a/webview/src/experiments/components/Experiments.tsx b/webview/src/experiments/components/Experiments.tsx index 496a3f2322..7fc4e7579b 100644 --- a/webview/src/experiments/components/Experiments.tsx +++ b/webview/src/experiments/components/Experiments.tsx @@ -13,7 +13,8 @@ import { Row as TableRow, getCoreRowModel, getExpandedRowModel, - ColumnSizingState + ColumnSizingState, + ColumnOrderState } from '@tanstack/react-table' import { Table } from './table/Table' import styles from './table/styles.module.scss' @@ -64,7 +65,8 @@ export const ExperimentsTable: React.FC = () => { const [columns, setColumns] = useState(buildColumns(columnData)) const [columnSizing, setColumnSizing] = useState(columnWidths) - const [columnOrder, setColumnOrder] = useState(columnOrderData) + const [columnOrder, setColumnOrder] = + useState(columnOrderData) const resizeTimeout = useRef(0) useEffect(() => { @@ -75,6 +77,10 @@ export const ExperimentsTable: React.FC = () => { setColumns(buildColumns(columnData)) }, [columnData]) + useEffect(() => { + setColumnOrder(columnOrderData) + }, [columnOrderData]) + const getRowId = useCallback( (experiment: Commit, relativeIndex: number, parent?: TableRow) => parent ? [parent.id, experiment.id].join('.') : String(relativeIndex),