Assistance Needed with React DataTable Fixed Column Feature

balopatel2212

Hello,

I hope you are doing well.

I am currently using React DataTable in my project, and it has been working well so far. However, I am trying to implement the fixed columns functionality, and I am encountering an issue. When I add fixedColumns inside the options, I receive the following error:

Object literal may only specify known properties, and 'fixedColumns' does not exist in type 'Config'.(2353)
index.d.ts(26, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & DataTableProps & RefAttributes<DataTableRef>'

Here is a snippet of my code.

    import DataTable from 'datatables.net-react';
    import DT from 'datatables.net-dt';
    import 'datatables.net-responsive-dt';
    import 'datatables.net-select-dt';

    import 'datatables.net-fixedcolumns-dt';

    import './App.css';

    DataTable.use(DT);

    function App() {
      const columns = [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary' },
      ];

      return (
        <>
          <div>
            <h1>Using DataTables Extensions</h1>
            <h2>DataTables + React example</h2>
            <p>
              This example demonstrates the <code>datatables.net-react</code>
              package being used with DataTable's events through <code>
                on*
              </code>{' '}
              properties on the component.
            </p>
            <p>
              Full documentation for the DataTables React component is{' '}
              <a href="https://datatables.net/manual/react">
                available in the DataTables manual
              </a>
              .
            </p>

            <DataTable
              ajax="/data.json"
              columns={columns}
              className="display"
              options={{
                fixedColumns: {
                  start: 1,
                  end: 1
                },
                paging: false,
                scrollCollapse: true,
                scrollX: true,
                scrollY: "300px"
              }}
            >
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Position</th>
                  <th>Office</th>
                  <th>Extn.</th>
                  <th>Start date</th>
                  <th>Salary</th>
                </tr>
              </thead>
            </DataTable>
          </div>
        </>
      );
    }

    export default App;

Could you kindly assist me with this issue? I have been searching for a solution for the past three days, but I haven't been able to resolve it.

Your help would be greatly appreciated. Thank you in advance for your prompt assistance.

allan

Try FixedColumns 5.0.4 which I've just released. That should fix it. It is just a typescript definition error and .4 fixes that.

Allan

balopatel2212

Thank you for your prompt response. I truly appreciate your help.

Unfortunately, the issue is still not resolved. Below are the versions of the libraries I am currently using:

datatables.net-react: 1.0.0
datatables.net-dt: 2.1.8
datatables.net: 2.1.8
datatables.net-fixedcolumns: 5.0.4
datatables.net-fixedcolumns-dt: 5.0.4

If you have any further suggestions or insights, I would greatly appreciate it.

Thank you again for your time and assistance.

balopatel2212

Thank you, it was my mistake, I was using some wrong syntax.