# gridler

> The 'gridler' is a datagrid React component which supports CRUD, sorting, filtering and exporting

Latest version **0.5.2** (published 2021-08-04) · 0 weekly downloads

## Install

```sh
npm install gridler
pnpm add gridler
yarn add gridler
bun add gridler
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.2 |
| Published | 2021-08-04 |
| First published | 2021-07-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 65.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Horvath Michael |
| Maintainers | horvathmichael |
| Keywords | react, components, ui, gridler, datagrid, table |

## Links

- npm: https://www.npmjs.com/package/gridler
- Repository: https://github.com/horvathmichael/gridler
- Homepage: https://github.com/horvathmichael/gridler#readme
- Issues: https://github.com/horvathmichael/gridler/issues
- npm.io page: https://npm.io/package/gridler

## Dependencies (6)

- [core-js](https://npm.io/package/core-js.md) ^3.16.0
- [react-csv](https://npm.io/package/react-csv.md) ^2.0.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.60
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.12.2
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.2

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.5.2 (latest) — 2021-08-04
- 0.5.1 — 2021-08-04
- 0.5.0 — 2021-08-04
- 0.4.3 — 2021-08-01
- 0.4.2 — 2021-08-01
- 0.4.1 — 2021-08-01
- 0.4.0 — 2021-07-30
- 0.3.1 — 2021-07-30
- 0.3.0 — 2021-07-30
- 0.2.0 — 2021-07-29
- 0.1.0 — 2021-07-29

## README

# gridler

## Table of Contents
- [Installation](#installation)
- [Import](#import)
- [Props](#props)
  - [GridlerColumn](#gridlercolumn)
  - [Row rendering](#row-rendering)
- [Getting Started](#getting-started)

## Installation
```
npm install gridler
```

## Import 
```js
import Gridler from "gridler";
```

## Props
|Name|Type|Default|Description|
|---|---|---|---|
|columns*|[GridlerColumn](#gridlercolumn)[]||List of columns of type 'GridlerColumn'. See [GridlerColumn](#gridlercolumn) below for more details.|
|rows*|object[]||List of rows |
|density|'compact' \| 'default' \| 'comfort'|'default'|Sets the density of the rows.|
|filter|object||Sets the initial filter criteria. For example {id: 5, name: 'Doe'}|
|sort|object||Sets the initial sort field and order. For example { field: 'id', order:'asc'}|
|disableColumnSelector|boolean|false|If **true**, the column selector is disabled.|
|disableDensitySelector|boolean|false|If **true**, the density selector is disabled.|
|local|'en' \| 'de'|'en'|Sets which set of text labels should be used in the Gridler|
|onAddClick|() => void||If defined, a 'Add' button will be displayed in the toolbar and the callback fired when a click event comes|
|onRowClick|(row, event: React.MouseEvent) => void||Callback fired when a click event comes from a row container element.|

### GridlerColumn
|Name|Type|Default|Description|
|---|---|---|---|
|field*|string||Name of the row-object field to use in this column|
|description|string||description of the column|
|filterable|boolean|true|if **true** the rows can be filtered by the value in this column|
|headerName|string|`column${index}`|Label for the column header|
|hide|boolean|false|if **true** the column will not be displayed|
|renderHeader|() => node||Set this function if you want to render more than a simple label as header|
|renderCell|(row) => node||Set this function if you want to render a node as row value|
|sortable|boolean|true|if **true**, the rows can be sorted by the value in this column|
|sortComparator|(a,b) => integer||You can set a custom sort comparator to define how this column should be sorted|
|type|'text' \| 'number' \| 'date' \| 'dateTime' \| 'boolean' \| 'select'|'text'|the type of the column|
|valueFormatter|(value) => string||You can set a value formatter to format the value for display without changing the underlaying value (for example '0.2' to '20%')|
|valueGetter|(row) => string||Use this function if the column doesn´t have a corresponding value, or if you want to render a combination of different fields.|
|width|integer|200|width of the column|

### Row rendering
By default, the gridler renders the value as a string in the cell. It resolves the rendered output in the following order:

1. renderCell(row) => ReactElement
2. valueFormatter(value) => string
3. valueGetter(row) => string
4. row[field]

## Getting Started
```js
import Gridler from "gridler";

const columns = [
  {
    field: 'id',
    headerName: 'ID',
    width: 50,
  }, {
    field: 'name',
    headerName: 'Name',
    valueGetter: ({row}) => `${row.firstname} ${row.lastname}`,
    width: 200,
  }, {
    field: 'email',
    headerName: 'Email',
    width: 250,
  },
];

const rows = [
  { id: 1, firstname: 'John', lastname: 'Doe', email: 'john@thisisnotareal.adress'},
  { id: 1, firstname: 'Jane', lastname: 'Doe', email: 'jane@thisisnotareal.adress'},
];

export default function App() {
  return (
    <Gridler 
      columns={columns}
      rows={rows}
    />
  );
};
```

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