Javascript React上的Grid.js示例

是否有使用grid.js的React示例？有错误

从“React”导入React；
从'gridjs'导入{Grid}；
export const TableNew=（）=>{
常量网格=新网格({
列：[“每周”、“每两周”、“每月”、“每年”]，
数据：（）=>[
[Pay'，0,0,0]，
[“应纳税所得额”，0,0,0]，
['Taxes'，0,0,0]，
],
});
console.log（'grid'，grid）；
返回{grid}；
};

错误： 错误：对象作为React子对象无效（找到：具有键{u config}的对象）。如果要呈现子对象集合，请改用数组。

---

在div中（TableNew.jsx:15）

没有关于这个的文档，但它的工作方式是需要一个ref来渲染

import React, { useEffect, useRef } from "react";
import { Grid } from "gridjs";

const TableNew = () => {
  const wrapperRef = useRef(null);

  useEffect(() => {
    new Grid({
      columns: ["Weekly", "Fortnightly", "Monthly", "Annually"],
      data: () => [
        ["Pay", 0, 0, 0],
        ["Taxable Income", 0, 0, 0],
        ["Taxes", 0, 0, 0]
      ]
    }).render(wrapperRef.current);
  });

  return <div ref={wrapperRef} />;
};

export default TableNew;

import React，{useffect，useRef}来自“React”；
从“gridjs”导入{Grid}；
const TableNew=（）=>{
const wrapperRef=useRef（null）；
useffect（（）=>{
新电网({
栏目：[“每周”、“每两周”、“每月”、“每年”]，
数据：（）=>[
[“支付”，0,0,0]，
[“应纳税所得额”，0,0,0]，
[“税”，0,0,0]
]
}).render（wrapperRef.current）；
});
返回；
};
导出默认表格；

我用一个工作示例创建了一个沙箱

---

添加React包装器有一个开放的问题（我可以猜，因为问题的意图没有明确描述）

下面是一个示例，其中包含来自api的自定义分页、搜索、排序和动态数据

const ExampleComponent = () => { 
    const grid = new Grid({
        search: {
            enabled: true,
            placeholder: 'Search...'
        },
        sort: true,
        pagination: {
            enabled: true,
            limit: 5,
            summary: false
        },
        columns: [
            'Id',
            'Tag',
            'Name'
        ],
        data: () => {
            return api.movies.list({ locationId }).then(({ data }) => {
                return data.results.map(movie => [movie.id, movie.tag, movie.name])
            })
        }
    })

    useEffect(() => {
        grid.render(document.getElementById('wrapper'))
    }, [locationId])

    return (
      <div id='wrapper' />
    )
}

const ExampleComponent=（）=>{
常量网格=新网格({
搜索：{
启用：对，
占位符：“搜索…”
},
排序：对，
分页：{
启用：对，
限额：5，
小结：错
},
栏目：[
“Id”，
“标签”，
“姓名”
],
数据：（）=>{
返回api.movies.list（{locationId}）。然后（{data}）=>{
返回data.results.map（movie=>[movie.id，movie.tag，movie.name]）
})
}
})
useffect（（）=>{
render（document.getElementById（'wrapper'））
}，[locationId]）
返回(
)
}

我刚刚发布了Grid.js的React组件的第一个版本：

安装

npm install --save gridjs-react

另外，请确保已经安装了Grid.js，因为它是gridjs的对等依赖项：

npm install --save gridjs

用法

<Grid
  data={[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]}
  columns={['Name', 'Email']}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

链接

例如：

回购：

---

在CodeSandbox上编辑：

我还在react上下文中使用Grid.js。我发现我必须同时安装Grid.js和React集成：

npm安装gridjs

npm安装gridjs react

然后将导入更改为：

从“gridjs react”导入{Grid}



我相信没有react包装还有另一种方法，但这正是我的诀窍所在