网格示例.js在 React 上

Question

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

import React from 'react';
import { Grid } from 'gridjs';
export const TableNew = () => {
const grid = new Grid({
columns: ['Weekly', 'Fortnightly', 'Monthly', 'Annually'],
data: () => [
['Pay', 0, 0, 0],
['Taxable Income', 0, 0, 0],
['Taxes', 0, 0, 0],
],
});
console.log('grid', grid);
return <div>{grid}</div>;
};

错误： 错误：对象作为 React 子对象无效(找到：键为 {_config} 的对象(。如果要呈现子项集合，请改用数组。 indiv (at TableNew.jsx：15(

Answer 1

没有这方面的文档，但它的工作方式是它需要一个 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;

我创建了一个带有工作示例的沙盒。

https://codesandbox.io/embed/vigorous-hopper-n4xig?fontsize=14&hidenavigation=1&theme=dark

添加一个React Wrapper https://github.com/grid-js/gridjs/issues/26 有一个未解决的问题(我可以猜到，因为问题意图没有明确描述(

Answer 2

下面是一个来自 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' />
)
}

Answer 3

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

安装

npm install --save gridjs-react

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

npm install --save gridjs

用法

<Grid
data={[
['John', '[e-mail]'],
['Mike', '[e-mail]']
]}
columns={['Name', 'Email']}
search={true}
pagination={{
enabled: true,
limit: 1,
}}
/>

链接

示例：https://gridjs.io/docs/integrations/react

回购：https://github.com/grid-js/gridjs-react

在代码沙盒上编辑：https://codesandbox.io/s/gridjs-react-ddy69

Answer 4

我也在反应上下文中使用 Grid.js。我发现我必须同时安装 Grid.js 和 React 集成：npm install gridjs
npm install gridjs-react

然后将导入更改为以下内容：



import {Grid} from "gridjs-react";

我确信还有另一种没有反应包装器的方法，但这就是我的诀窍。