Using FixedColumns in VUe

csyu

Error messages shown:
Object literal may only specify known properties, and 'fixedColumns' does not exist in type 'Config'.

Description of problem:
I'm looking to use the fixedColumns configuration option using the following code:

import DataTable from 'datatables.net-vue3';
import DataTablesLib, {Feature} from 'datatables.net';
import 'datatables.net-select';
import 'datatables.net-responsive';

...
<DataTable ref="table" :columns="columns" :data="data"
:options="{
  select: false,
  responsive: false,
  scrollX: true,
  fixedColumns: { start: 1, end: 1 }
}"
/>

Any idea why this is not working?

allan

You haven't imported datatables.net-fixedcolumns.

Allan

csyu

Hi Allan,

I get the same error even with:

import DataTable from 'datatables.net-vue3';
import DataTablesLib, {Feature} from 'datatables.net';
import 'datatables.net-select';
import 'datatables.net-responsive';
import 'datatables.net-fixedcolumns';

allan

Seems to work here: https://stackblitz.com/edit/datatables-net-vue3-simple-qthapw?file=package.json%2Csrc%2FApp.vue .

Please link to a test case showing the issue.

Allan

csyu

Thank you Allan. Based on your example, I realized that the issue was most likely with PHPStorm. I ended up doing the following (and it worked):

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import 'datatables.net-fixedcolumns';
DataTable.use(DataTablesCore);


const options: any = {
    responsive: false,
    scrollX: true,
    fixedColumns: {
        start: 1,
        end: 1
    },
}
...
<DataTable ref="table" :columns="columns" :data="data" :options="options"  class="display" />

allan

Odd that. Normally it would come from the language server. But good to hear you've got it working with the any workaround.

If anyone else is reading this thread because you've found it and have the same issue, please link to a git repo or StackBlitz example showing the problem.

Allan

csyu

Indeed, very odd. I will look to add to StackBlitz for the benefit of others.

Another strange thing here is that the scrolling now works with the first and last columns fixed. However, when I scroll the first and last columns are transparent:

Any quick ideas?

I tried different styles:

datatables.net-dt

and

datatables.net-bs5

allan

You likely haven't included the CSS. You need datatables.net-fixedcolumns-ba5 in your CSS (assuming this is with Bootstrap 5 styling).

Allan

csyu

Right on. Thanks.