Tabulator: moment is not defined at tabulator.js

Created on 7 Dec 2018  路  7Comments  路  Source: olifolkerd/tabulator

Describe the bug

moment is not defined at tabulator.js:14533:8

Tabulator Info

  • Which version of Tabulator are you using? 4.1.3
  • Post a copy of your construct object if possible so we can see how your table is setup
<link href="/css/tabulator.css" rel="stylesheet">
<script type="text/javascript" src="/js/tabulator.js"></script>

<div id="example-table"></div>

<script type="text/javascript">
    var table = new Tabulator("#example-table", {
        height: "25rem",
        ajaxURL: "/config",
        layout:"fitColumns",
        placeholder:"No Data Available",
        columns: [
            { title: "id",   field: "id"   },
            { title: "docn", field: "docn" },
            { title: "ctime", field: "ctime", formatter:"datetime",
            },
        ],
    });
</script>

Most helpful comment

Hi I just had this issue. This is how I fixed it.

  1. npm i moment
  2. I am using electron so I had to this:
const moment = require('moment')

/* 
tabulator expects moment to be globally available and this is not the case in latest version of moment, as I understand. So I had to add it to the window object. That fixed the issue. 
*/
window.moment = moment

Hope that helps.

All 7 comments

Hey @KES777

I really appreciate your enthusiasm. It is great to see that you are eager to use Tabulator.

But could i ask that you take a bit of time to get to know the system and search existing issues before creating a stream of issues. Things like the "optional column" definition have already been covered in other threads.

Cheers

Oli :)

@olifolkerd sorry, but I did not find where suggestion about optional parameter "columns" are covered

This reply comes outdated, but in case it might be of any help, here it goes:

The date handling in tabulator depends on a library called moment.js (https://momentjs.com/)
You can download it and add it to your project. It must be linked before tabulator.js.
That solves the issue.

@KES777 I didn't tag you on my previous reply.
Regards!

Hi I just had this issue. This is how I fixed it.

  1. npm i moment
  2. I am using electron so I had to this:
const moment = require('moment')

/* 
tabulator expects moment to be globally available and this is not the case in latest version of moment, as I understand. So I had to add it to the window object. That fixed the issue. 
*/
window.moment = moment

Hope that helps.

@jcramirez Thank you for mentioning the statement:
window.moment = moment
I use tabulator in my React app and need moment.js to provide date formatting in the grid. It solves the problem.

not using node.js, but a plain html page, just adding the "scriptTablePrereqDateTimeSort" row below made the sorter I had just added to an autocolumn work fine without any more work (sorter:"date", sorterParams:{format:"D/M/YYYY"})

    <!-- TABLE -->
    <link id="scriptTablePrereq1" href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet" type="text/css" />
    <script id="scriptTablePrereq2" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js" type="text/javascript"></script>
    <script id="scriptTablePrereqDateTimeSort" src="https://unpkg.com/moment/min/moment.min.js" type="text/javascript"></script>
    <script id="scriptTablePrereqIE" src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js" type="text/javascript"></script> <!-- for IE11 support see http://tabulator.info/docs/4.0/browsers -->
    <script id="scriptTablePrereqExportXLSX" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js" type="text/javascript"></script>
    <!--
    <script id="scriptTablePrereqExportPDF1" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js" type="text/javascript"></script>
    <script id="scriptTablePrereqExportPDF2" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js" type="text/javascript"></script>
    -->
Was this page helpful?
0 / 5 - 0 ratings

Related issues

c3pos-brother picture c3pos-brother  路  3Comments

mconnelley picture mconnelley  路  3Comments

cemmons picture cemmons  路  3Comments

aballeras01 picture aballeras01  路  3Comments

sphynx79 picture sphynx79  路  3Comments