如何在Ember中使用Tabulator并创建简单表格？

• 第一步：安装Tabulator依赖
  在项目根目录执行安装命令：
  npm install tabulator-tables --save
• 第二步：生成自定义Tabulator组件
  执行Ember脚手架命令生成专用组件，避免和业务代码耦合：
  ember g component tabulator-table
• 第三步：编写组件JS逻辑
  打开生成的app/components/tabulator-table.js文件，写入以下逻辑：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import Tabulator from 'tabulator-tables';
// 导入Tabulator基础样式，可根据需求替换为其他主题样式
import 'tabulator-tables/dist/css/tabulator.min.css';

export default class TabulatorTableComponent extends Component {
  @tracked tableInstance = null;
  tableContainer = null;

  @action
  initTable(element) {
    this.tableContainer = element;
    // 从组件调用处传入列配置、表格数据，也可直接写死做测试
    const { columns = [], tableData = [] } = this.args;
    
    this.tableInstance = new Tabulator(this.tableContainer, {
      height: '300px', // 可自定义高度，设为auto则自适应内容
      data: tableData,
      columns: columns,
      layout: 'fitColumns' // 列宽自适应容器
    });
  }

  willDestroy() {
    super.willDestroy(...arguments);
    // 组件销毁时清理Tabulator实例，避免内存泄漏
    if (this.tableInstance) {
      this.tableInstance.destroy();
      this.tableInstance = null;
    }
  }
}

• 第四步：编写组件模板
  打开对应的app/components/tabulator-table.hbs文件，写入挂载容器：

<div {{did-insert this.initTable}}></div>

• 第五步：在业务页面调用组件
  比如你要在某个路由页面展示用户表格，打开对应路由的hbs文件，传入配置即可：

<TabulatorTable 
  @columns={{array 
    (hash title="姓名" field="name") 
    (hash title="年龄" field="age" sorter="number") 
    (hash title="邮箱" field="email")
  }}
  @tableData={{array 
    (hash name="张三" age=25 email="zhangsan@example.com")
    (hash name="李四" age=30 email="lisi@example.com")
  }}
/>

说明：如果需要后续动态更新表格数据，直接修改传入的tableData后调用this.tableInstance.setData(newData)即可，也可以根据需求扩展组件的对外方法实现排序、筛选等功能。

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