Using Tabulator 5.4, and trying to allow the user to sort a column that contains dates, I am told in the documentation that

Dependency Required You will need to include the luxon.js library to use this sorter

but the documentation doesn't explain how to include the luxon.js library.

I have installed luxon using

npm install luxon

and I have

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

and then, in the table definition:

            {title: 'Modified', field: 'modifiedTime', sorter:"date", cssClass: 'grey'},

but when I run this, I get:

datetime.js:3 Uncaught ReferenceError: luxon is not defined
    at Sort.datetime$2 (datetime.js:3:30)
    at Sort.date$1 (date.js:9:18)
    at Sort._sortRow (Sort.js:462:37)
    at Sort.js:434:19
    at Array.sort (<anonymous>)
    at Sort._sortItems (Sort.js:428:8)
    at Sort.sort (Sort.js:369:10)
    at RowManager.refreshPipelines (RowManager.js:723:40)
    at VirtualDomVertical.rerenderRows (VirtualDomVertical.js:98:4)
    at RowManager.reRenderInPosition (RowManager.js:849:18)

I assume that I am not installing luxon in the right place or in the right way. How should I do it?

Using Tabulator 5.4, and trying to allow the user to sort a column that contains dates, I am told in the documentation that

Dependency Required You will need to include the luxon.js library to use this sorter

but the documentation doesn't explain how to include the luxon.js library.

I have installed luxon using

npm install luxon

and I have

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

and then, in the table definition:

            {title: 'Modified', field: 'modifiedTime', sorter:"date", cssClass: 'grey'},

but when I run this, I get:

datetime.js:3 Uncaught ReferenceError: luxon is not defined
    at Sort.datetime$2 (datetime.js:3:30)
    at Sort.date$1 (date.js:9:18)
    at Sort._sortRow (Sort.js:462:37)
    at Sort.js:434:19
    at Array.sort (<anonymous>)
    at Sort._sortItems (Sort.js:428:8)
    at Sort.sort (Sort.js:369:10)
    at RowManager.refreshPipelines (RowManager.js:723:40)
    at VirtualDomVertical.rerenderRows (VirtualDomVertical.js:98:4)
    at RowManager.reRenderInPosition (RowManager.js:849:18)

I assume that I am not installing luxon in the right place or in the right way. How should I do it?

• javascript
• tabulator
• luxon

• I have tried this, but it does not help. Same error as before. – Nigel Commented Feb 13, 2023 at 17:28
• 3 Use import * as luxon from 'luxon' and attach the luxon variable to Window object using window.luxon = luxon – Timur Commented Feb 14, 2023 at 21:39

2 Answers 2

As Timur suggested, this will work:

import {DateTime} from 'luxon'
window.DateTime = DateTime

Following on from @Nigel and @Timur's suggestions, note that if you are using Typescript, the addition of the two lines will fail to pile with the error Property 'DateTime' does not exist on type 'Window & typeof globalThis'. To work around this, you need to create a type file (e.g. src/types/index.d.ts) and add the following to it:

export {}

declare global {
  interface Window {
    DateTime: any 
  }
}