CODEWITHSUNDEEP
reactjssveltegrid.js
crashwap
crashwap

Reputation: 3062

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

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>

Upvotes: 0

Views: 866

Answers (2)

cssyphus
cssyphus

Reputation: 40038

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.

Upvotes: 2

johannchopin
johannchopin

Reputation: 14844

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.

Upvotes: 1

Related Questions