Skip to content

Columns with dot in accessor render empty cells #777

@pfo-omicsstudio

Description

@pfo-omicsstudio

Describe the bug
Columns whose accessor contains a dot (e.g. Group.names) are rendered as completely empty, even though the underlying row data contains values for that key.

For example, rows in this format:

{
  "key": "a6bbf955-7e2a-4664-a6ab-ce23d32dc080",
  "sampleName": "Sample1",
  "value": 3.150405115836441,
  "Group.names": "GroupA",
  "Organism": "Homo sapiens (Human)",
  "GeneNamesPrimary": "PIGBOS1"
}

and a column like this for "Group.names":

{
  accessor: "Group.names",
  title: "Group.names",
  sortable: true,
}

causes the column header shows up, but all cells are empty.
It looks like "Group.names" is treated as a path (row.Group.names) instead of a literal key row["Group.names"]), so the value is never read correctly from the row object.

To Reproduce
To Reproduce

Use this minimal repro component:

import { DataTable, type DataTableColumn } from 'mantine-datatable';

type Row = {
  key: string;
  sampleName: string;
  value: number;
  'Group.names': string;
  Organism: string;
  GeneNamesPrimary: string;
};

const records: Row[] = [
  {
    key: '1',
    sampleName: 'Sample1',
    value: 3.150405115836441,
    'Group.names': 'GroupA',
    Organism: 'Homo sapiens (Human)',
    GeneNamesPrimary: 'PIGBOS1',
  },
  {
    key: '2',
    sampleName: 'Sample1',
    value: 3.25393558322,
    'Group.names': 'GroupA',
    Organism: 'Homo sapiens (Human)',
    GeneNamesPrimary: 'CD300H',
  },
  {
    key: '3',
    sampleName: 'Sample1',
    value: 3.713411715413312,
    'Group.names': 'GroupA',
    Organism: 'Homo sapiens (Human)',
    GeneNamesPrimary: 'NBDY',
  },
];

const columns: DataTableColumn<Row>[] = [
  { accessor: 'sampleName', title: 'Sample' },
  { accessor: 'value', title: 'Relative Expression' },
  { accessor: 'Group.names', title: 'Group.names' },
  { accessor: 'Organism', title: 'Organism' },
  { accessor: 'GeneNamesPrimary', title: 'GeneNamesPrimary' },
];

export function DotAccessorBugRepro() {
  return <DataTable columns={columns} records={records} />;
}

Expected behavior
If accessor is a string, and the row object has a property with exactly that key (even if it contains a dot), the table should read and display that value.

At minimum, there should be a way to treat accessors as literal keys rather than paths, or a documented way to escape/opt out of path semantics.

Screenshots

Image

Additional context
In R, spaces in column names gets substituted with dots, which is what led me to discover this issue.
As most of our user data is generated in R, this is a major problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions