fixedColumns not working React
fixedColumns not working React
![Johan_Botes](https://secure.gravatar.com/avatar/965a26d4f79f33019cf58d6d93414702/?default=https%3A%2F%2Fvanillicon.com%2F965a26d4f79f33019cf58d6d93414702_200.png&rating=g&size=120)
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.
Answers
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
Hey Allan here is the code
https://codesandbox.io/s/crazy-microservice-d8375l?file=/src/App.tsx
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?