Row Selection - When click any row then all rows are selected (possible bug)

[danielbettech]

Hello! I'm experiencing an error (maybe bug).

When I select any row, then all rows are selected, and when I deselect any other, all rows are deselected. It was working correctly but suddenly it happens.

export default function QuotationsTable({
  saleChainsContainingQuotations,
  handleViewDocumentSaleChain,
  mutate,
}) {
  const [selectedRecords, selectedRecordsSet] = useState([])

  const saleChains = getSaleChainsForTable(saleChainsContainingQuotations)

  return (
    <DataTable
      idAccessor='saleChainId'
      // fetching={!saleChainsContainingQuotations}
      selectedRecords={selectedRecords}
      onSelectedRecordsChange={selectedRecordsSet}
      records={saleChains}
      columns={[
        {
          accessor: 'A',
          render: ({
            folio_number,
            customerName,
            total_gross,
            utilities: { saleChainId, items, hasOrderOrInvoice },
          }) => {
            return (
              <QuotationActionsMenu
                saleChainId={saleChainId}
                items={items}
                customerName={customerName}
                folioNumber={folio_number}
                totalGross={total_gross}
                hasOrderOrInvoice={hasOrderOrInvoice}
                handleViewDocumentSaleChain={handleViewDocumentSaleChain}
                mutate={mutate}
              />
            )
          },
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            const { folioNumberColor } = hasOrderOrInvoiceStyles
            return { color: folioNumberColor, ...hasOrderOrInvoiceStyles }
          },
        },
        {
          title: 'Folio',
          accessor: 'folio_number',
          titleSx: (theme) => ({
            '&&': { color: theme.colors.orange[6] },
          }),
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            const { folioNumberColor } = hasOrderOrInvoiceStyles
            return { color: folioNumberColor, ...hasOrderOrInvoiceStyles }
          },
        },
        {
          title: 'Cliente',
          accessor: 'customerName',
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            return { ...hasOrderOrInvoiceStyles }
          },
        },
        {
          title: 'Sucursal',
          accessor: 'branchName',
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            return { ...hasOrderOrInvoiceStyles }
          },
        },
        {
          title: 'Items',
          accessor: 'itemsQuantity',
          textAlignment: 'right',
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            return { ...hasOrderOrInvoiceStyles }
          },
        },
        {
          title: 'Total (sin IVA)',
          accessor: 'total_net',
          textAlignment: 'right',
          render: ({ total_net }) => currency(total_net).format(),
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            return { ...hasOrderOrInvoiceStyles }
          },
        },
        {
          title: 'Total (con IVA)',
          accessor: 'total_gross',
          textAlignment: 'right',
          render: ({ total_gross }) => currency(total_gross).format(),
          cellsStyle: ({ utilities: { hasOrderOrInvoiceStyles } }) => {
            return { ...hasOrderOrInvoiceStyles }
          },
        },
      ]}
    />
  )
}

[icflorescu]

Are you sure your idAccessor='saleChainId' is correct?

[danielbettech]

It was under nested inside another prop. That worked again. Thanks!