iter(g324): table-core 补 setColumns,换列后失效排序与筛选剔除

This commit is contained in:
HIsheR
2026-10-27 01:16:36 +08:00
parent 766fe76cc4
commit 8e358c4faf
5 changed files with 68 additions and 4 deletions
@@ -210,4 +210,42 @@ clamp.dispatch({ type: 'setPage', page: 9 }); // 显式跳到越界页
assert(clamp.getVisibleRows().rows.length === 1 && clamp.getState().pagination.page === 3, '跳越界页:派生钳制后回写为末页 3');
assert(clamp.getPageInfo().totalPages === 3, '收敛不改分页快照语义(totalPages 仍按 total 推算)');
// setColumns:动态换列,失效的排序 / 筛选按 key 剔除,accessor 跟随新列集
const colsTable = createTable({
data: users,
columns: [
{ key: 'name', header: 'Name', sortable: true },
{ key: 'age', header: 'Age', sortable: true, accessor: (row) => row.age },
{ key: 'city', header: 'City' },
],
rowKey: 'id',
plugins: [filterPlugin(), sortPlugin(), paginationPlugin(), selectionPlugin()],
initialState: {
sorting: [{ key: 'age', dir: 'desc' }],
filters: [{ key: 'city', value: 'Beijing' }],
},
});
assert(colsTable.getVisibleRows().total === 2, 'setColumns 前:city 筛选生效(Beijing 2 行)');
colsTable.setColumns([
{ key: 'name', header: 'Name', sortable: true },
{ key: 'score', header: 'Score', accessor: (row) => 100 - row.age }, // 换列集:city 列没了,age 列换成派生 score
]);
assert(
colsTable.getState().sorting.length === 0 && colsTable.getState().filters.length === 0,
'setColumns 后:指向不存在列的排序 / 筛选整体剔除(age 列已换成 score)',
);
assert(colsTable.getVisibleRows().total === 5, 'setColumns 后:失效筛选被剔除,total 回到全量 5 行');
assert(colsTable.getColumns().length === 2 && colsTable.getColumns()[1].key === 'score', 'setColumns 后:getColumns 返回新列集');
assert(
colsTable.getCellValue(users[0], 'score') === 65,
'setColumns 后:getCellValue 跟随新列 accessor(score = 100 - age)',
);
const sameCols = colsTable.getColumns();
let colNotified = 0;
colsTable.subscribe(() => {
colNotified += 1;
});
colsTable.setColumns(sameCols);
assert(colNotified === 0, 'setColumns 引用未变:短路不通知');
console.log('SMOKE OK');
+19 -3
View File
@@ -14,7 +14,8 @@ export function createTable<T>(
options: TableOptions<T>,
): TableInstance<T> & Record<string, unknown> {
let data = options.data; // 可变:setRows 整体换数据源(筛选结果、轮询刷新),派生管线照旧跑
const { columns, plugins = [], onStateChange } = options;
let cols = options.columns; // 可变:setColumns 动态换列(按角色 / 视图切换列集),失效的排序 / 筛选按 key 剔除
const { plugins = [], onStateChange } = options;
const rowKey = options.rowKey ?? ('id' as keyof T & string); // 默认行标识
const getKey: (row: T) => RowKey =
@@ -64,7 +65,7 @@ export function createTable<T>(
/*** 取单元格值:优先列 accessor,缺省取 row[key] ***/
function getCellValue(row: T, key: string): unknown {
const col = columns.find((c) => c.key === key);
const col = cols.find((c) => c.key === key);
if (col?.accessor) return col.accessor(row);
return (row as Record<string, unknown>)[key];
}
@@ -115,14 +116,29 @@ export function createTable<T>(
for (const fn of listeners) fn();
}
/*** 整体替换列定义:引用未变则不动;换列后指向不存在列的排序 / 筛选剔除(列都没了,规则失去语义),分页 / 选择与列集无关、保持不动。 ***/
function setColumns(next: typeof cols): void {
if (next === cols) return;
cols = next;
const keys = new Set(next.map((c) => c.key));
const sorting = state.sorting.filter((s) => keys.has(s.key));
const filters = state.filters.filter((f) => keys.has(f.key));
if (sorting.length !== state.sorting.length || filters.length !== state.filters.length) {
state = { ...state, sorting, filters }; // 只动失效规则:页码 / 选择保持
}
onStateChange?.(state);
for (const fn of listeners) fn();
}
const instance: TableInstance<T> = {
getState: () => state,
dispatch,
subscribe,
setRows,
setColumns,
getVisibleRows,
getAllRows: () => getVisibleRows(false), // 筛选 + 排序后、未分页的全量行(导出等场景)
getColumns: () => columns,
getColumns: () => cols,
getCellValue,
isRowSelected: (key) => state.selection.includes(key),
};
+1
View File
@@ -91,6 +91,7 @@ export interface TableInstance<T = unknown> {
dispatch(action: Action): void; // 派发动作,唯一变更入口
subscribe(fn: () => void): () => void; // 订阅变更,返回取消函数
setRows(rows: T[]): void; // 整体换数据源(筛选结果 / 轮询刷新),选择状态按 rowKey 剔除失效行
setColumns(columns: ColumnDef<T>[]): void; // 整体换列定义(按角色 / 视图切换列集),失效的排序 / 筛选按 key 剔除
getVisibleRows(): RowModel<T>; // 可见行模型(过完整管线)
getAllRows(): RowModel<T>; // 筛选 + 排序后、未分页的全量行(导出用)
getColumns(): ColumnDef<T>[]; // 列定义