66

0

Glide Data Grid

基于画布的数据网格,支持数百万行、快速更新和原生滚动。

Glide Data Grid

基于画布的数据网格,支持数百万行、快速更新和 原生滚动

作为Glide 数据编辑器的基础构建。我们正在招聘

使用示例数据滑动数据网格

版本 反应 16+ 代码覆盖率 npm 包大小 执照 由滑翔制造

👩‍💻演示和功能

我们的故事书中有很多有趣的例子。

特征

  • 它扩展到数百万行 。单元格根据内存效率的需要延迟渲染。
  • 滚动速度非常快 。本机滚动使一切都保持光滑。
  • 支持多种类型的细胞 。数字、文本、markdown、气泡、图像、向下钻取、uri
  • 完全免费和开源MIT 许可,因此您可以在商业项目中使用 Grid。
  • 编辑是内置的
  • 可调整大小和可移动的列
  • 可变大小的行
  • 合并单元格
  • 单选和多选行、单元格和列
  • 单元格渲染可以完全自定义

⚡快速开始

首先确保您使用的是 React 16 或更高版本。然后安装数据网格:

npm i @glideapps/glide-data-grid

如果您还没有对等依赖项,您可能还需要安装它们:

npm i lodash marked react-responsive-carousel

DataEditor在需要显示大量数据的地方创建新的

<DataEditor getCellContent={getData} columns={columns} rows={numRows} />

不要忘记导入强制性 CSS

import "@glideapps/glide-data-grid/dist/index.css";

制作列很容易

// Grid columns may also provide icon, overlayIcon, menu, style, and theme overrides
const columns: GridColumn[] = [
    { title: "First Name", width: 100 },
    { title: "Last Name", width: 100 },
];

最后向网格提供数据

// If fetching data is slow you can use the DataEditor ref to send updates for cells
// once data is loaded.
function getData([col, row]: Item): GridCell {
    const person = getData(row);

    if (col === 0) {
        return {
            kind: GridCellKind.Text,
            data: person.firstName,
            allowOverlay: false,
            displayData: person.firstName
        };
    } else if (col === 1) {
        return {
            kind: GridCellKind.Text,
            data: person.lastName,
            allowOverlay: false,
            displayData: person.lastName
        };
    } else {
        throw new Error();
    }
}

完整的 API 文档

完整的API 文档在 API.md文件中。

📒常问问题

什么都没有出现!

请阅读文档中的先决条件部分

当我尝试编辑单元格时它崩溃了!

请阅读文档中的先决条件部分

它是否适用于屏幕阅读器和其他 a11y 工具?

是的。不幸的是,没有一个主要的开发人员是可访问性用户,因此我们不知道的实现中可能存在缺陷。欢迎报告错误!

它支持我的数据源吗?

是的。

数据网格与您加载/存储/生成/变异数据的方式无关。它需要的是你告诉它你有哪些列,有多少行,并给它一个函数,它可以调用它来获取特定行和列中单元格的数据。

它是否进行排序、搜索和过滤?

包括搜索。您提供触发器,我们进行搜索。我们故事书中的例子

过滤和排序是你必须用你的数据源实现的东西。如果需要,可以使用钩子添加列标题菜单。

我们默认不添加过滤/排序的原因是这些通常是非常特定于应用程序的,并且通常也可以在数据源中更有效地实现,例如通过数据库查询。

它可以做冷冻柱吗?

是的!

我可以渲染自己的细胞吗?

是的,但是渲染器必须使用 HTML Canvas。我们故事书中的简单示例

为什么 Data Grid 使用 HTML Canvas?

最初我们使用虚拟化渲染实现了我们的网格。我们使用react-virtualized在水平和垂直方向上进行了虚拟化。问题只是滚动性能。一旦你需要每帧加载/卸载数百个 DOM 元素,没有什么能拯救你。

您可以做一些技巧,例如设置计时器并进入“低保真”渲染模式,在这种模式下,每个单元格只渲染一个元素。这可以正常工作,直到您想要显示数百个单元格并且您又回到了断断续续的滚动状态。它看起来或感觉也不是很好。

我想将它与 Next.js / Vercel 一起使用,但我遇到了奇怪的错误

将网格与 Next 一起使用的最简单方法是创建一个包含网格的组件,然后将其作为动态导入。

home.tsx

import type { NextPage } from "next";
import dynamic from "next/dynamic";
import styles from "../styles/Home.module.css";

const Grid = dynamic(
    () => {
        return import("../components/Grid");
    },
    { ssr: false }
);

export const Home: NextPage = () => {
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <h1 className={styles.title}>Hi</h1>
                <Grid />
            </main>
        </div>
    );
};

grid.tsx

import React from "react";
import DataEditor from "@glideapps/glide-data-grid";

export default function Grid() {
    return <DataEditor {...args} />;
}