# sheet-happens

> React Spreadsheet

Latest version **0.0.67** (published 2026-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install sheet-happens
pnpm add sheet-happens
yarn add sheet-happens
bun add sheet-happens
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.67 |
| Published | 2026-10-29 |
| First published | 2021-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 7 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 109 |
| Author | Luka-M |
| Maintainers | lukamijatovic |

## Links

- npm: https://www.npmjs.com/package/sheet-happens
- Repository: https://github.com/farseerdev/sheet-happens
- Homepage: https://farseerdev.github.io/sheet-happens/
- Issues: https://github.com/farseerdev/sheet-happens/issues
- npm.io page: https://npm.io/package/sheet-happens

## Dependencies (7)

- [linebreak](https://npm.io/package/linebreak.md) ^1.1.0
- [color-rgba](https://npm.io/package/color-rgba.md) ^3.0.0
- [postcss-normalize](https://npm.io/package/postcss-normalize.md) ^13.0.1
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^10.1.1
- [use-resize-observer](https://npm.io/package/use-resize-observer.md) ^7.0.0
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) ^5.0.2
- [@babel/plugin-proposal-unicode-property-regex](https://npm.io/package/@babel/plugin-proposal-unicode-property-regex.md) ^7.18.6

## Recent versions

- 0.0.67 (latest) — 2026-10-29
- 0.0.66 — 2026-10-23
- 0.0.65 — 2026-10-22
- 0.0.64 — 2026-10-16
- 0.0.63 — 2026-10-16
- 0.0.62 — 2026-08-15
- 0.0.61 — 2026-07-17
- 0.0.60 — 2026-06-26
- 0.0.59 — 2026-06-05
- 0.0.58 — 2026-04-29
- 0.0.57 — 2026-01-09
- 0.0.56 — 2025-10-24
- 0.0.55 — 2025-03-05
- 0.0.54 — 2025-01-31
- 0.0.53 — 2024-12-19
- … 52 more at https://npm.io/package/sheet-happens/versions

## README

# sheet-happens

> React Spreadsheet

[![NPM](https://img.shields.io/npm/v/sheet-happens.svg)](https://www.npmjs.com/package/sheet-happens) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![Sheeeeeit](https://media.giphy.com/media/in6mnJNYjGKpq/source.gif)

## About
Canvas-based spreadsheet component for React. <br />
Super fast and responsive regardless of the dataset size because it draws only the data user currently sees.

![sheet-happens](https://raw.githubusercontent.com/farseerdev/sheet-happens/main/example/src/assets/sheethappensimg.png)

## Install

```bash
npm install --save sheet-happens
```

## Usage
To use our Sheet in your project, just import the component and its style and render it:

```jsx
import React, { Component } from 'react'

import Sheet from 'sheet-happens'
import 'sheet-happens/dist/index.css'

class Example extends Component {
  render() {
    return <Sheet />
  }
}
```

Of course, you can also display some data in it:
```jsx
const [data, setData] = useState([[1,2,3], [10,20,30]]);
    
const displayData = (x, y) => {
    return data?.[y]?.[x]?.toFixed?.(2);
};

return (
    <div className="sheet-box">
        <Sheet
            sourceData={data}
            displayData={displayData}
        />
    </div>
);
```

Go to our [example page](https://farseerdev.github.io/sheet-happens/) to learn more about [features](https://farseerdev.github.io/sheet-happens#features) it has and checkout [documentation](https://farseerdev.github.io/sheet-happens#documentation) for detailed list of props you can send to this component. <br />

Along with descriptions, page also contains multiple Sheet components you can use to try out is it a good match for your needs. Edit some values, paste some data, drag columns and rows for resize, and so on.


## License

MIT © [Luka-M](https://github.com/Luka-M)

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