Glide Data Grid

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

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

👩‍💻演示和功能

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

特征

• 它扩展到数百万行 。单元格根据内存效率的需要延迟渲染。
• 滚动速度非常快 。本机滚动使一切都保持光滑。
• 支持多种类型的细胞 。数字、文本、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} />;
}