# egenie-data-grid

> egenie表格组件库

Latest version **2.1.9** (published 2024-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install egenie-data-grid
pnpm add egenie-data-grid
yarn add egenie-data-grid
bun add egenie-data-grid
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.9 |
| Published | 2024-05-21 |
| First published | 2021-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 569 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | egfrontend |

## Links

- npm: https://www.npmjs.com/package/egenie-data-grid
- npm.io page: https://npm.io/package/egenie-data-grid

## Dependencies (1)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1

## Recent versions

- 2.1.9 (latest) — 2024-05-21
- 2.0.31-rc.1 (next) — 2024-01-05
- 2.1.8 — 2024-05-09
- 2.1.7 — 2024-04-08
- 2.1.6 — 2024-03-21
- 2.1.5 — 2024-03-21
- 2.1.4 — 2024-03-11
- 2.1.3 — 2024-03-11
- 2.1.2 — 2024-03-11
- 2.1.1 — 2024-02-21
- 2.1.0 — 2024-02-21
- 2.0.33 — 2024-02-01
- 2.0.32 — 2024-01-19
- 2.0.31 — 2024-01-05
- 2.0.30 — 2024-01-04
- … 97 more at https://npm.io/package/egenie-data-grid/versions

## README

# react-data-grid

[![npm-badge]][npm-url]
[![type-badge]][npm-url]
[![size-badge]][size-url]
[![codecov-badge]][codecov-url]
[![ci-badge]][ci-url]

[npm-badge]: https://img.shields.io/npm/v/react-data-grid
[npm-url]: https://www.npmjs.com/package/react-data-grid
[size-badge]: https://img.shields.io/bundlephobia/minzip/react-data-grid
[size-url]: https://bundlephobia.com/result?p=react-data-grid
[type-badge]: https://img.shields.io/npm/types/react-data-grid
[codecov-badge]: https://codecov.io/gh/adazzle/react-data-grid/branch/main/graph/badge.svg?token=cvrRSWiz0Q
[codecov-url]: https://codecov.io/gh/adazzle/react-data-grid
[ci-badge]: https://github.com/adazzle/react-data-grid/workflows/CI/badge.svg
[ci-url]: https://github.com/adazzle/react-data-grid/actions

## Install

```sh
npm install react-data-grid
```

react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to scripts for the browsers you target using [Babel](https://babeljs.io/) and [browserslist](https://github.com/browserslist/browserslist).

<details>
<summary>Example browserslist configuration file</summary>

```
last 2 chrome versions
last 2 edge versions
last 2 firefox versions
last 2 safari versions
```

See [documentation](https://github.com/browserslist/browserslist)

</details>

<details>
<summary>Example babel.config.json file</summary>

```json
{
  "presets": [
    [
      "@babel/env",
      {
        "bugfixes": true,
        "shippedProposals": true,
        "corejs": 3,
        "useBuiltIns": "entry"
      }
    ]
  ]
}
```

See [documentation](https://babeljs.io/docs/en/)

- It's important that the configuration filename be `babel.config.*` instead of `.babelrc.*`, otherwise Babel might not transpile modules under `node_modules`.
- We recommend polyfilling modern JS features with [core-js](https://www.npmjs.com/package/core-js) by adding the following snippet at the top of your bundle's entry file:
  ```js
  import 'core-js/stable';
  ```
  - Babel's `env` preset, if configured correctly, will transform this import so only the necessary polyfills are included in your bundle.
- Polyfilling the [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API is required for older browsers.
</details>

<details>
<summary>Webpack configuration with babel-loader</summary>

```js
{
  // ...
  module: {
    rules: {
      test: /\.js$/,
      exclude: /node_modules[/\\](?!react-data-grid[/\\]lib)/,
      use: 'babel-loader'
    }
  }
}
```

See [documentation](https://github.com/babel/babel-loader)

</details>

<details>
<summary>rollup.js configuration with @rollup/plugin-babel</summary>

```js
{
  // ...
  plugins: {
    babel({
      include: ['./src/**/*', './node_modules/react-data-grid/lib/**/*']
    });
  }
}
```

See [documentation](https://github.com/rollup/plugins/tree/master/packages/babel)

</details>

## Usage

```jsx
import DataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];

const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];

function App() {
  return <DataGrid columns={columns} rows={rows} />;
}
```

## Documentation

- [Website](https://adazzle.github.io/react-data-grid/canary/)
  - [Source code](stories)
- [Old website for react-data-grid v5](https://adazzle.github.io/react-data-grid/)
- [Changelog](CHANGELOG.md)
- [Contributing](CONTRIBUTING.md)

---
_Source: https://npm.io/package/egenie-data-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._