当数据是 objects 的数组时重命名 Grid.js dataTable 中的列标题（Svelte）

Question

我正在使用 Grid.js（Svelte 包装器）。 （对于那些想知道的人，Svelte 是 React 的衍生产品，它的流行度呈指数增长，这是有充分理由的）

数据通过提取调用进入应用程序，根据数据中的内容，我需要重命名两个列标题。

数据以 objects 的数组形式出现（工作正常）。 Svelte REPL 演示将数据显示为数组的数组，其中重命名列只需更改列定义中的名称即可。简单。

但是当数据是 objects 的数组时，它在所有其他方面与 Svelte/Grid.js 一起工作得很好，更改列名会导致该列被排除在 table.

所以必须有一种方法可以在不排除列的情况下更改列的显示标题（table header 标题...？

Here's a persistent Svelte REPL example/demo using Grid.js（是Grid.js移植到Svelte的英雄创造的example/demo）。要查看问题，请更改

  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)],
  ]

到

  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)},
  ]

在此演示中，如何将 table 列标题从 Salary 更改为 Earnings

这是该 REPL 的完整 example/demo，为后代转载于此：

<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

您需要在此处将 object 中的 salary 键与小写的列标题相匹配，因此 earnings。因此，如果可能，第一个解决方案是使用 earnings 键而不是 salary 获得 data object。如果那不可能，您必须在将 data object 提供给 Grid 组件之前直接更新它。这可以使用 .map 函数轻松完成：

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

这里是 REPL.

Answer 2

在 Grid.js docs page 上，在 Config 下的列下，它注释了一个可选的属性 id。这个属性的名称不太好，因为它是一个字符串值，即原始列名称。

请注意，示例代码显示列定义可以是值数组、objects 数组或混合数组。

因此，您可以将列定义修改为：

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

瞧瞧！列标题已重命名。

当数据是 objects 的数组时重命名 Grid.js dataTable 中的列标题（Svelte）

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

reactjs

svelte

grid.js