fixedColumns not working React

Johan_Botes

Hi I have been trying to add fixed columns in my datatable in react;

I get this error when I added the fixed columns to it
Argument of type '{ fixedColumns: { leftColumns: number; }; orderCellsTop: true; scrollY: string; scrollX: true; pageLength: number; language: { lengthMenu: string; info: string; zeroRecords: string; emptyTable: string; infoEmpty: string; infoFiltered: string; }; columnDefs: ({ ...; } | { ...; })[]; }' is not assignable to parameter of type 'Config'.
Object literal may only specify known properties, and 'fixedColumns' does not exist in type 'Config'. TS2345

177 | 
178 |     let table = new DataTable('#test', {

179 | fixedColumns: {
| ^
180 | leftColumns: 1,
181 | },
182 | orderCellsTop: true,

I have imported what is need

import $ from "jquery";
import DataTable from 'datatables.net-bs4';
import 'datatables.net-autofill-bs4';
import 'datatables.net-buttons-bs4';
import 'datatables.net-colreorder-bs4';
import 'datatables.net-fixedcolumns-bs4';
import 'datatables.net-fixedheader-bs4';
import 'datatables.net-keytable-bs4';
import 'datatables.net-responsive-bs4';
import 'datatables.net-rowgroup-bs4';
import 'datatables.net-rowreorder-bs4';
import 'datatables.net-scroller-bs4';
import 'datatables.net-searchbuilder-bs4';
import 'datatables.net-searchpanes-bs4';
import 'datatables.net-select-bs4';
import 'datatables.net-staterestore-bs4';
import 'datatables.net-plugins/sorting/absolute.js';

This is its config

let table = new DataTable('#test', {
      orderCellsTop: true,
      scrollY: "250px",
      scrollX: true,
      pageLength: 10,
      language: {
        lengthMenu: "Display _MENU_ users per page",
        info: "Showing page _PAGE_ of _PAGES_",
        zeroRecords: "No matching users found",
        emptyTable: "No users found",
        infoEmpty: "Showing 0 to 0 of 0 users",
        infoFiltered: ""
      },
      columnDefs: [{
        targets: -1,
        visible: false,
        className: 'dt-body-center',
        type: hidden,
      },
      {
        targets: 0,
        className: 'text-align-center',
      },
      {
        targets: 2,
        className: 'text-align-center',
      },
      {
        targets: 3,
        className: 'text-align-center',
      },
      {
        targets: 4,
        className: 'text-align-center',
      },
      {
        targets: 5,
        className: 'text-align-center',
      },
      ],
    });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Should work with what you've got - it looks okay. Could you create a Stackblitz or a mini repo that shows the issue so I can look into it further please?

Edit I just realised I don't see the code you indicated was causing an error in the Javascript above?

Thanks,
Allan

Johan_Botes

Hey Allan here is the code
https://codesandbox.io/s/crazy-microservice-d8375l?file=/src/App.tsx

Johan_Botes

I have tried manually importing each file from the datatables.net-fixedcolumns-bs4 and still does not work. Any other ideas of what I could try?