npmpackage.info

@glideapps/glide-data-grid

🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.

6.0.3

4,088

MIT

TypeScript

63.45 kB

2,664,783 3

Installations

npm install @glideapps/glide-data-grid

Pull Requests

Open

27

Total

353

Closed

63

Merged

263

Issues

Open

80

Total

546

Closed

466

Releases

Glide Data Grid 6.0.3

v6.0.3

Published on 03 Feb 2024

Glide Data Grid 6.0.2

v6.0.2

Published on 31 Jan 2024

Glide Data Grid 6.0.1

v6.0.1

Published on 31 Jan 2024

Glide Data Grid 6.0.0

v6.0.0

Published on 13 Jan 2024

6.0.0 beta 6

v5.99.9-beta6

Published on 17 Dec 2023

Glide Data Grid 5.3.2

v5.3.2

Published on 01 Dec 2023

View all 31 releases

Developer

glideapps

Developer Guide

BETA

Module System

ESM, UMD

Min. Node Version

Typescript Support

Yes

Node Version

20.10.0

NPM Version

10.2.3 Statistics

4,088 Stars

611 Commits

301 Forks

42 Watching

48 Branches

50 Contributors

Updated on 29 Nov 2024

Bundle Size

192.83 kB

Minified

63.45 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (99.3%)

Shell (0.28%)

CSS (0.19%)

HTML (0.16%)

Dockerfile (0.05%)

JavaScript (0.04%)

Total Downloads

Cumulative downloads

Total Downloads

2,664,783

Last day

-6.1%

5,105

Compared to previous day

Last week

0.7%

30,106

Compared to previous week

Last month

5.1%

133,752

Compared to previous month

Last year

16.5%

1,329,598

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Glide Data Grid

A canvas-based data grid, supporting millions of rows, rapid updating, and native scrolling.

Built as the basis for the Glide Data Editor. We're hiring.

👩‍💻 Demo and features

Lots of fun examples are in our Storybook.

You can also visit our main site.

Features

It scales to millions of rows. Cells are rendered lazily on demand for memory efficiency.
Scrolling is extremely fast. Native scrolling keeps everything buttery smooth.
Supports multiple types of cells. Numbers, text, markdown, bubble, image, drilldown, uri
Fully Free & Open Source. MIT licensed, so you can use Grid in commercial projects.
Editing is built in.
Resizable and movable columns.
Variable sized rows.
Merged cells.
Single and multi-select rows, cells, and columns.
Cell rendering can be fully customized.

⚡ Quick Start

First make sure you are using React 16 or greater. Then install the data grid:

1npm i @glideapps/glide-data-grid

You may also need to install the peer dependencies if you don't have them already:

1npm i lodash marked react-responsive-carousel

Create a new DataEditor wherever you need to display lots and lots of data

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

Don't forget to import mandatory CSS

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

Making your columns is easy

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

Last provide data to the grid

1// If fetching data is slow you can use the DataEditor ref to send updates for cells
2// once data is loaded.
3function getData([col, row]: Item): GridCell {
4    const person = data[row];
5
6    if (col === 0) {
7        return {
8            kind: GridCellKind.Text,
9            data: person.firstName,
10            allowOverlay: false,
11            displayData: person.firstName,
12        };
13    } else if (col === 1) {
14        return {
15            kind: GridCellKind.Text,
16            data: person.lastName,
17            allowOverlay: false,
18            displayData: person.lastName,
19        };
20    } else {
21        throw new Error();
22    }
23}

You can edit this example live on CodeSandbox

Full API documentation

The full API documentation is on the main site

📒 FAQ

Nothing shows up!

Please read the Prerequisites section in the docs.

It crashes when I try to edit a cell!

Please read the Prerequisites section in the docs.

Does it work with screen readers and other a11y tools?

Yes. Unfortunately none of the primary developers are accessibility users so there are likely flaws in the implementation we are not aware of. Bug reports welcome!

Does it support my data source?

Yes.

Data Grid is agnostic about the way you load/store/generate/mutate your data. What it requires is that you tell it which columns you have, how many rows, and to give it a function it can call to get the data for a cell in a specific row and column.

Does it do sorting, searching, and filtering?

Search is included. You provide the trigger, we do the search. Example in our storybook.

Filtering and sorting are something you would have to implement with your data source. There are hooks for adding column header menus if you want that.

The reason we don't add filtering/sorting in by default is that these are usually very application-specific, and can often also be implemented more efficiently in the data source, via a database query, for example.

Can it do frozen columns?

Yes!

Can I render my own cells?

Yes, but the renderer has to use HTML Canvas. Simple example in our Storybook.

Why does Data Grid use HTML Canvas?

Originally we had implemented our Grid using virtualized rendering. We virtualized both in the horizontal and vertical direction using react-virtualized. The problem is simply scrolling performance. Once you need to load/unload hundreds of DOM elements per frame nothing can save you.

There are some hacks you can do like setting timers and entering into a "low fidelity" rendering mode where you only render a single element per cell. This works okay until you want to show hundreds of cells and you are right back to choppy scrolling. It also doesn't really look or feel great.

I want to use this with Next.js / Vercel, but I'm getting weird errors

The easiest way to use the grid with Next is to create a component which wraps up your grid and then import it as a dynamic.

home.tsx

1import type { NextPage } from "next";
2import dynamic from "next/dynamic";
3import styles from "../styles/Home.module.css";
4
5const Grid = dynamic(
6    () => {
7        return import("../components/Grid");
8    },
9    { ssr: false }
10);
11
12export const Home: NextPage = () => {
13    return (
14        <div className={styles.container}>
15            <main className={styles.main}>
16                <h1 className={styles.title}>Hi</h1>
17                <Grid />
18            </main>
19        </div>
20    );
21};

grid.tsx

1import React from "react";
2import DataEditor from "@glideapps/glide-data-grid";
3
4export default function Grid() {
5    return <DataEditor {...args} />;
6}

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/beta.js.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/beta.js.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/beta.js.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/beta.js.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/beta.js.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/beta.js.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/beta.js.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/beta.js.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/beta.js.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/beta.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/node.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/node.js.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.js.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.js.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.js.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.js.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.js.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.js.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.js.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.js.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.js.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/release.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.js.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/storybook.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.js.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/storybook.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/storybook.js.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/glideapps/glide-data-grid/storybook.js.yml/main?enable=pin
Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:5
Warn: npmCommand not pinned by hash: setup-react-18-test.sh:3
Warn: npmCommand not pinned by hash: .github/workflows/beta.js.yml:24
Warn: npmCommand not pinned by hash: .github/workflows/beta.js.yml:43
Warn: npmCommand not pinned by hash: .github/workflows/beta.js.yml:62
Warn: npmCommand not pinned by hash: .github/workflows/node.js.yml:18
Warn: npmCommand not pinned by hash: .github/workflows/node.js.yml:37
Warn: npmCommand not pinned by hash: .github/workflows/release.js.yml:25
Warn: npmCommand not pinned by hash: .github/workflows/release.js.yml:43
Warn: npmCommand not pinned by hash: .github/workflows/release.js.yml:61
Warn: npmCommand not pinned by hash: .github/workflows/storybook.js.yml:19
Info: 0 out of 18 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 8 third-party GitHubAction dependencies pinned
Info: 0 out of 1 containerImage dependencies pinned
Info: 1 out of 11 npmCommand dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

46 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-p3vf-v8qc-cwcr
Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-92r3-m2mg-pj97
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
Warn: Project is vulnerable to: GHSA-g77x-44xx-532m

Score

3

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @glideapps/glide-data-grid

@glideapps/glide-data-grid-cells

6.0.3

Extra cells for glide-data-grid

@glideapps/glide-data-grid-source

6.0.3

Useful data source hooks for Glide Data Grid

@glideapps/ts-necessities

2.3.2

Small utilities to make life with TypeScript easier

canvas-hypertxt

1.0.3

The fastest way to layout wrapped text on a HTML5 canvas

@glideapps/glide-data-grid

Installations

Pull Requests

27

353

63

263

Issues

80

546

466

Releases

Developer

Developer Guide

ESM, UMD

Yes

20.10.0

10.2.3

Statistics

Bundle Size

192.83 kB

63.45 kB

Languages

Total Downloads

2,664,783

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Glide Data Grid

👩‍💻 Demo and features

Features

⚡ Quick Start

Full API documentation

📒 FAQ

10

10

10

2

0

0

0

0

0

0

0

0

3

/10

Other packages similar to @glideapps/glide-data-grid