The date is not working correctly in dynamic columns when using column control.

Durgzozo

if (!colConfig.error && colConfig?.cf2fields) {
    colConfig.cf2fields.push({name:'Project Name',visible:"1",ord:'0',manage:{name:'Project'}});
    let fields = colConfig.cf2fields;
    fields.sort((a, b) => (+a.ord || 0) - (+b.ord || 0));
    dtColumns = fields.map(field => {
            console.log('field',field.manage.name);
        let column = {
            data: field.name,
            title: field.manage.name ? field.manage.name : field.name.charAt(0).toUpperCase() + field.name.slice(1),
            visible: field.visible !== "0" ? true : false,
        };
        if (field.name === 'tag' || field.name === 'tags') {
             column.columnControl= [
                "order",
                [
                    'orderAsc', 'orderDesc', 
                    {
                    extend: "searchList",
                    options: tagOptions.map(function(x) { return { label: x, value: x }; })
                    }
               ]
                ]
        }
       if (field.name === 'due') {
        column.type = 'date'; 
        column.render = DataTable.render.datetime('D MMM YYYY'); 
        column.columnControl = [
            "order",
            [
                { extend: 'orderAsc', text: 'Older First' }, 
                { extend: 'orderDesc', text: 'Newer First' },
                {
            extend: "search", 
            text: "Filter by Date",
            config: {
                mask: 'YYYY-MM-DD', 
                format: 'D MMM YYYY' 
            }
        }
            ]
        ];
    }
        return column;

    });
}
new DataTable('#projectTable', {       
    columns: dtColumns,
    ordering: {
        indicators: false,
        handler: false
    },
    scrollX: true,
    scrollY: 500,
    scroller: true,
    colReorder: true,
    stateSave: true
});

Durgzozo

if (field.name === 'due') {
column.columnControl= [
"order",
[
{ extend: 'orderAsc', text: 'Older First' },
{ extend: 'orderDesc', text: 'Newer First' },
{ extend: "search", text:'Filter by Date',format: 'YYYY-MM-DD'}
]
];
column.render = DataTable.render.datetime('DD T', 'de-CH');
}
if (field.name === 'dateCreated') {
column.columnControl= [
"order",
[
{ extend: 'orderAsc', text: 'Older First' },
{ extend: 'orderDesc', text: 'Newer First' },
{ extend: "search", text:'Filter by Date',format: 'YYYY-MM-DD'}
]
];
column.render = DataTable.render.datetime('DD T', 'de-CH');
}

it is working with due but not working with dateCreated

allan

Can you link to a test case showing the issue so I can help to debug it please? See How to ask for help for further details if you can't just link to your page.

Allan

Durgzozo

Hi Allan

Why does the DataTable scroll from right to left when I click on the Status column?

https://live.datatables.net/satohaju/2/edit

allan

It looks like a bug in ColReorder I'm afraid. Many thanks for the link - I'm not immediately sure what is going wrong there, but will look into it.

Allan

allan

I've just been looking at this and your example uses an old version of ColReorder (2.0.0). With the current release (2.1.2) it functions as expected: https://live.datatables.net/satohaju/6/edit .

I would suggest you use the download builder to make sure you get the latest version of all of the libraries you are using. The Buttons version used there is quite old as well for example.

Allan