Fluent

Northstar Component Issues#

Table#

Key error#

The below table throws a key error due to the duplication of Axel. As far as I can tell this is a general pattern whereby any duplication of data within a row (that is, duplicate elements in the items array) results in a key error. I believe this is due to the React key for any given table cell being implicitly set to the corresponding element of the items array.

Name

AlterEgo

Age

Axel

27 years

Preben

None

1 year

Preben

PrebenTwoBoo

30000000000000 years

Code Showing Error#

import { Provider, teamsTheme, Table } from '@fluentui/react-northstar';

// We export const for mdx related reasons
export const header = {
    items: ['Name', 'Picture', 'Age'],
};

export const rows = [
    {
        key: 1,
        items: ['Axel', 'Axel', '27 years'],
    },
    {
        key: 2,
        items: ['Preben', 'None', '1 year'],
    },
    {
        key: 3,
        items: ['Preben', 'PrebenTwoBoo', '30000000000000 years'],
    },
];

<Provider theme={teamsTheme}>
    <Table header={header} rows={rows} />
</Provider>;

Workaround#

You can explicitly provide a key for the "duplicate items", in the above this would amount to changing rows to read:

export const rows = [
    {
        key: 1,
        items: ['Axel', { content: 'Axel', key: 'SomeUniqueKey' }, '27 years'],
    },
    {
        key: 2,
        items: ['Preben', 'None', '1 year'],
    },
    {
        key: 3,
        items: ['Preben', 'PrebenTwoBoo', '30000000000000 years'],
    },
];

Note that whenever you use shorthand props in the Table you must provide a key.