# @hyukyu/grid

> A react component to display your Postgres table data. Used in Supabase Dashboard app. Modified by hkkang

Latest version **1.0.0** (published 2022-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hyukyu/grid
pnpm add @hyukyu/grid
yarn add @hyukyu/grid
bun add @hyukyu/grid
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-04-14 |
| First published | 2022-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | hkkang |

## Links

- npm: https://www.npmjs.com/package/@hyukyu/grid
- npm.io page: https://npm.io/package/@hyukyu/grid

## Dependencies (13)

- [dayjs](https://npm.io/package/dayjs.md) ^1.10.4
- [p-queue](https://npm.io/package/p-queue.md) 6.6.2
- [react-dnd](https://npm.io/package/react-dnd.md) ^14.0.3
- [scheduler](https://npm.io/package/scheduler.md) ^0.20.2
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [react-tracked](https://npm.io/package/react-tracked.md) ^1.7.4
- [react-contexify](https://npm.io/package/react-contexify.md) ^5.0.0
- [react-tiny-popover](https://npm.io/package/react-tiny-popover.md) ^6.0.5
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.1.1
- [@monaco-editor/react](https://npm.io/package/@monaco-editor/react.md) ^4.3.1
- [@scaleleap/pg-format](https://npm.io/package/@scaleleap/pg-format.md) ^1.0.0
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^14.0.1
- [awesome-debounce-promise](https://npm.io/package/awesome-debounce-promise.md) ^2.1.0

## Recent versions

- 1.0.0 (latest) — 2022-04-14

## README

# Supabase Grid

A react component to display your Postgresql table data.

[![release](https://img.shields.io/github/release/supabase/grid.svg)](https://github.com/supabase/grid/releases/)
[![CI](https://github.com/supabase/grid/workflows/CI/badge.svg)](https://github.com/supabase/grid/actions?query=workflow%3ACI)

## Install

```bash
npm i @supabase/grid
```

This package requires some peer dependencies, which you need to install by yourself.

```bash
npm i react react-dom @supabase/react-data-grid @supabase/ui
```

## Usage

```js
<SupabaseGrid
  table="countries"
  onSqlQuery={async (query: string) => {
    // run query and return the result
  }}
/>
```

## Properties

#### Required

- `table` SupaTable object or table/view name.
  - readonly mode: support both table and view
  - editable mode: only for table
- `onSqlQuery` run sql query.

#### Optional

- `editable` enable table editor.
- `headerActions` react node to display in grid header.
- `gridProps` props to config grid view.
- `schema` table/view schema. Defaults to 'public'.
- `storageRef` storageRef is used to save state on localstorage.
- `theme` grid theme.
- `onAddColumn` show create new column button if available.
- `onAddRow` show add row button if available.
- `onError` error handler.
- `onEditColumn` show edit column menu if available.
- `onEditRow` show edit row button if available.
- `onDeleteColumn` show delete column menu if available.

## Run example

1. Build library: `npm start`
2. Go to example folder: `cd example`
3. Create **.env** file: `cp .env.example .env`
4. Update **example/.env** file with your Supabase project settings
5. Run example app: `npm start`

## Contributing

- Fork the repo on [GitHub](https://github.com/supabase/grid)
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes and merge

## License

This repo is licensed under MIT.

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