Rename column titles in Grid.js dataTable when data is array of objects (Svelte)

Question

I am using Grid.js (Svelte wrapper). (For those wondering, Svelte is a derivative of React that is growing exponentially in popularity, for good reason)

The data is brought into the app via a fetch call and, depending on what's in the data, I need to rename two column titles.

The data comes in as an array of objects (works fine). The Svelte REPL demo shows the data as an array of arrays, where renaming a column is simply a matter of changing the name in the columns definition. Simple.

But when the data is an array of objects, which works just fine with Svelte/Grid.js in all other aspects, changing a column name causes that column to be excluded from the table.

So there must be a way to change the column's display title (table header title) without excluding the column...?

Here's a persistent Svelte REPL example/demo using Grid.js (it is the example/demo created by the hero who ported Grid.js to Svelte). To see the problem, change

  const columns = ['Name', 'Salary'];
  const data = [
    ['John', Math.round(Math.random() * 100000)],
    ['Mark', Math.round(Math.random() * 100000)],
    ['Josh', Math.round(Math.random() * 100000)],
    ['Sara', Math.round(Math.random() * 100000)],
    ['Maria', Math.round(Math.random() * 100000)],
  ]

to

  const columns = ['Name', 'Salary'];
  const data = [
    {name: 'John', salary: Math.round(Math.random() * 100000)},
    {name: 'Mark', salary: Math.round(Math.random() * 100000)},
    {name: 'Josh', salary: Math.round(Math.random() * 100000)},
    {name: 'Sara', salary: Math.round(Math.random() * 100000)},
    {name: 'Maria', salary: Math.round(Math.random() * 100000)},
  ]

In this demo, how would one change the table column title from Salary to Earnings

Here is the complete example/demo from that REPL, reproduced here for posterity:

<script>
  import Grid from "gridjs-svelte"
    import salaryPlugin from "./TotalSalaryPlugin.js"

    const columns = ['Name', 'Salary']
  const data = [
    {name: 'John', salary: Math.round(Math.random() * 100000)},
    {name: 'Mark', salary: Math.round(Math.random() * 100000)},
    {name: 'Josh', salary: Math.round(Math.random() * 100000)},
    {name: 'Sara', salary: Math.round(Math.random() * 100000)},
    {name: 'Maria', salary: Math.round(Math.random() * 100000)},
  ]

    let grid

    $: if (grid) {
        // add plugin
        grid.plugin.add(salaryPlugin)
        
        // we need to force rendering so the plugin can show up
        grid.forceRender()
    }
</script>

<Grid bind:instance={grid} {data} {columns} />

<style global>
  @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
</style>

Answer 1

You need here to match the salary key in the object with the column title in lowercase so earnings. So first solution if possible is to get a data object with the earnings keys instead of salary. If that is not possible you will have to update the data object directly before giving it to the Grid component. That can be easily done with the .map function:

<Grid 
  bind:instance={grid} 
  data={data.map(elmt => ({...elmt, earnings: elmt.salary}))} 
  {columns} 
/>

Here is the REPL.

Answer 2

On the Grid.js docs page, under Config, under columns, it notes an optional property id. This is a poor name for this property, since it is a string value that is the original column name.

Note that the example code shows that the column definition can either be an array of values, or an array of objects, or mixed.

So, you can modify the columns definition to be:

const columns = ['Name', {id: 'Salary', name: 'Earnings'}]

And le voila! The column title is renamed.