Tabulator表格：能否一键保存全部配置与数据以重建表格？

Tabulator 没有内置的 table.save() 和 table.load() 方法来直接导出/导入完整的表格配置与数据，但可以通过组合它的现有API实现完全相同的效果。

一、保存表格完整状态 #

你需要分别捕获数据、列配置、分页状态、排序/筛选状态等信息，整合成一个可存储的对象：

// 获取表格实例
const table = new Tabulator("#your-table", { /* 初始配置 */ });

// 保存状态的函数
function saveTableState() {
  // 获取当前表格数据（含用户修改后的数据）
  const data = table.getData();
  
  // 获取列配置，只保留需要的属性（如标题、宽度、可见性等）
  const columns = table.getColumns().map(col => ({
    field: col.getField(),
    title: col.getTitle(),
    width: col.getWidth(),
    visible: col.isVisible(),
    index: col.getIndex() // 保存列的顺序
  }));
  
  // 获取分页相关状态
  const pagination = {
    enabled: table.getPagination(),
    pageSize: table.getPageSize(),
    currentPage: table.getPage()
  };
  
  // 获取排序和筛选状态
  const sorters = table.getSorters();
  const filters = table.getFilters();
  
  // 整合所有状态
  const tableState = { data, columns, pagination, sorters, filters };
  
  // 可以存到localStorage或后端
  localStorage.setItem("tabulator-state", JSON.stringify(tableState));
}

二、加载状态重建表格 #

从存储中取出状态，销毁旧表格后重新初始化：

function loadTableState() {
  const savedState = JSON.parse(localStorage.getItem("tabulator-state"));
  if (!savedState) return;
  
  // 销毁旧表格实例
  table.destroy();
  
  // 用保存的状态创建新表格
  const newTable = new Tabulator("#your-table", {
    data: savedState.data,
    columns: savedState.columns.sort((a, b) => a.index - b.index), // 恢复列顺序
    pagination: savedState.pagination.enabled,
    paginationSize: savedState.pagination.pageSize,
    initialSort: savedState.sorters, // 恢复排序
    initialFilter: savedState.filters // 恢复筛选
  });
  
  // 跳转到保存的页码
  newTable.setPage(savedState.pagination.currentPage);
  
  // 更新表格实例引用
  return newTable;
}

注意事项 #

• 你可以根据实际使用的配置项扩展保存的内容，比如列的冻结状态、编辑权限等，只需要调用对应的Tabulator API获取即可。
• 如果涉及复杂的自定义列格式或回调函数，需要单独处理（因为函数无法被JSON序列化，可通过标识字段在加载时重新绑定）。

内容的提问来源于stack exchange，提问作者user2445278