Internal issue 2913 - IcDataTable cell not rendered if data not passed in

[ticket-sync[bot]]

Currently, if no data is passed in for a cell in the data table, then no cell is rendered. Ideally, an empty cell would be rendered for visual consistency.

Example code:

{noformat}export interface ITestTableData { firstName: string; surname: string; age: string; ids?: string[]; }

export const columns: IcDataTableColumnObject[] = [ { key: "firstName", title: "First Name", dataType: "string", columnWidth: "40%" }, { key: "surname", title: "Surname", dataType: "string", columnWidth: "40%" }, { key: "age", title: "Age", dataType: "string", columnWidth: "20%" }, { key: "ids", title: "IDs", dataType: "string", columnWidth: "130px" } ];

export const data: ITestTableData[] = [ { firstName: "Luke", surname: "Skywalker", age: "32", ids: ["ID:1", "ID:2"] }, { firstName: "Darth", surname: "Vader", age: "55" } ];

<IcDataTable caption="Generic data table" columns={columns} data={data} />{noformat}

In the screenshot attached, you can see that the IDs cell for the Darth Vader row doesn’t exist.

[ad9242]

confirmed this is still an issue:

if you have the following (i.e. no address for second row of data)

export const LONG_DATA = [
  {
    employeeNumber: 1,
    name: "Joe Bloggs",
    age: 30,
    jobTitle: "Developer",
    address: "1 Main Street, Town, County, Postcode",
  },
  {
    employeeNumber: 2,
    name: "Sarah Jones",
    age: 28,
    jobTitle: "Developer",
 },

then row border and highlighting does not extend to the width of the table as a table cell <td> is not rendered:

A previous issue where setting address: undefined has been fixed and does render a cell

[GCHQ-Developer-741]

Would be solved by #1789

[ad9242]

fixed