javascript - React 上的 Grid.js 示例

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} 的对象）。如果您打算渲染一组子项，请改用数组。在 div 中（在 TableNew.jsx:15）

Answer 1

这是一个来自 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 2

没有关于此的文档，但它的工作方式是它需要一个 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 3

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

安装

npm install --save gridjs-react

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

npm install --save gridjs

用法

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

链接

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

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

在 CodeSandbox 上编辑：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";

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