Column selector with special name in react-data-table-component

Question

I am using a react-data-table-component plugin to make the table. I am trying to create the data table for the following data,

[
    {
        "1.1 - 2.1 cm": 348.75,
        "2.1 - 3.1 cm": 285.75,
        "3.1 - 4.1 cm": 145.5,
        "> 4.1 cm": 1465.875,
        "Ear Class": "MA_1"
    }
]

I have written my column selector with the special characters as below,

const columns = [
{
      name: "1.1 - 2.1 cm",
      selector: "1.1 - 2.1 cm",
      sortable: true,
    }
]

And in my datatable component, I write like below,

<DataTable
    columns={columns}
    data={data}
    pagination={true}
    paginationPerPage={10}
  />

But it is not working. It throws me the following error message,

Uncaught TypeError: Cannot read properties of undefined (reading '1 - 2')
    at index.cjs.js:1:1
    at Array.reduce (<anonymous>)
    at getProperty (index.cjs.js:1:1)
    at index.cjs.js:1:1
    at renderWithHooks (react-dom.development.js:14803:1)
    at updateFunctionComponent (react-dom.development.js:17034:1)
    at updateSimpleMemoComponent (react-dom.development.js:16972:1)
    at updateMemoComponent (react-dom.development.js:16861:1)
    at beginWork (react-dom.development.js:18682:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22154:1)
    at workLoopSync (react-dom.development.js:22130:1)
    at performSyncWorkOnRoot (react-dom.development.js:21756:1)
    at react-dom.development.js:11089:1
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)
    at flushSyncCallbackQueue (react-dom.development.js:11072:1)
    at batchedUpdates$1 (react-dom.development.js:21862:1)
    at Object.notify (Subscription.js:19:1)
    at Subscription.notifyNestedSubs (Subscription.js:92:1)
    at Subscription.handleChangeWrapper (Subscription.js:97:1)
    at Object.dispatch (redux.js:222:1)
    at e (<anonymous>:2494:20)
    at index.js:11:1
    at dispatch (redux.js:638:1)

I think it is due to a special character on my column selector. Is there any solution?

PS: I created the issue on github too. But still no response, so I posted it here. Any help will be highly appreciated.

Column selector with special name in react-data-table-component

0 Answers0