使用Tabulator 5.4配置日期排序时遇luxon未定义错误求解决

问题原因 #

Tabulator内置的date/datetime排序器需要全局作用域下的luxon对象，你当前仅导入了luxon的DateTime模块，没有让Tabulator能访问到完整的luxon实例，因此触发报错。

正确操作方式 #

方式一：将luxon挂载到全局作用域 #

安装luxon后，修改导入代码：

import {TabulatorFull as Tabulator} from 'tabulator-tables'
// 导入完整的luxon模块
import * as luxon from 'luxon'
// 挂载到window全局，让Tabulator可以访问到
window.luxon = luxon

方式二：通过Tabulator配置传入luxon实例 #

初始化表格时，通过luxonConfig参数直接传入luxon：

import {TabulatorFull as Tabulator} from 'tabulator-tables'
import * as luxon from 'luxon'

// 初始化表格
const table = new Tabulator('#your-table-container', {
  columns: [
    {title: 'Modified', field: 'modifiedTime', sorter:"date", cssClass: 'grey'},
    // 其他列配置
  ],
  // 传入luxon实例
  luxonConfig: luxon,
  // 其他表格配置
})

验证 #

完成上述配置后重新运行项目，日期列的排序功能即可正常使用。

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