# virtual-grid

> A viewport into a virtual grid of text cells

Latest version **2.0.1** (published 2017-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install virtual-grid
pnpm add virtual-grid
yarn add virtual-grid
bun add virtual-grid
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2017-12-29 |
| First published | 2017-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Thomas Watson |
| Maintainers | watson |
| Keywords | term, terminal, columns, cols, column, col, layout, manager, rows, row, cells, cell, table, grid, windows |

## Links

- npm: https://www.npmjs.com/package/virtual-grid
- Repository: https://github.com/watson/virtual-grid
- Homepage: https://github.com/watson/virtual-grid#readme
- Issues: https://github.com/watson/virtual-grid/issues
- npm.io page: https://npm.io/package/virtual-grid

## Dependencies (3)

- [wrap-ansi](https://npm.io/package/wrap-ansi.md) ^2.1.0
- [ansi-substring](https://npm.io/package/ansi-substring.md) ^1.0.3
- [fixed-width-string](https://npm.io/package/fixed-width-string.md) ^1.0.0

## 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

- 2.0.1 (latest) — 2017-12-29
- 2.0.0 — 2017-12-28
- 1.0.0 — 2017-12-28

## README

# virtual-grid

A viewport into a virtual grid of text cells.

Renderes cells in a grid. Each cell contains text that is wrapped and
truncated to fit inside the cell. Full support for ANSI colors. Useful
as a layout manager for terminal apps.

[![Build status](https://travis-ci.org/watson/virtual-grid.svg?branch=master)](https://travis-ci.org/watson/virtual-grid)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)

## Installation

```
npm install virtual-grid --save
```

## Usage

```js
const Grid = require('virtual-grid')

const grid = new Grid({
  height: 10,
  width: 20,
  rows: [
    [{height: 5, text: 'This is the top cell spanning the entire width'}],
    [{width: '50%', text: 'Left column'}, {width: '50%', text: 'Right column'}]
  ]
})

// Update the text in cell C
grid.update(1, 1, 'This text have been overwritten')

console.log(grid.toString())
```

Output:

```
This is the top cell
spanning the entire
width


Left      This text
column    have been
          overwritt…


```

## API

### `grid = new Grid(options)`

Provide an `options` object as the first argument. The following options
are supported:

- `width` - The total width of the viewport (defaults to
  `process.stdout.columns`)
- `height` - The total height of the viewport (defaults to
  `process.stdout.rows`)
- `rows` - An array of rows. Each row is an array of `cell` objects

A `cell` object supports the following properties:

- `width` - The width of the cell. If the value is the string `auto` it
  will fill out the remaining space in the viewport. If the value is a
  string containing a percent sign (e.g. `25%`), it's treated as a
  percentage of the total width of the viewport. Otherwise it's treated
  as an integer representing the width in columns (defaults to `auto`)
- `height` - The height of the cell. If the value is the string `auto`
  it will fill out the remaining space in the viewport. If the value is
  a string containing a percent sign (e.g. `25%`), it's treated as a
  percentage of the total height of the viewport. Otherwise it's treated
  as an integer representing the height in rows (defaults to `auto`)
- `text` - Default text content of the cell (defaults to an empty
  string)
- `wrap` - Set to `false` to disable automatic line wrapping (defaults
  to `true`)
- `padding` - An optional array of cell padding for the top, right,
  bottom, and left edge of the cell respectively, e.g. `[0, 2, 0, 2]`
  for 2 chars of padding on the left and right edge only. If given an
  integer instead of an array, the padding is applied to all edges

You can use strings instead of objects for cells. This is equivalent to
`{text: cell}`

### `grid = new Grid(rows)`

An alias for:

```js
new Grid({rows: rows})
```

### Event: `update`

Emitted every time a cell in the grid is updated.

### `grid.update(row, cell, text)`

Update the text content of a cell.

Arguments:

- `row` - The row index
- `cell` - The cell index inside the row
- `text` - The new text content of the cell

### `grid.resize(width, height)`

Resize the viewport to new `width` and `height`.

### `cell = grid.cellAt(row, index)`

Return the cell at the gien `row` and index`.

### `str = grid.toString()`

Render all content in all cells in the grid and return the result as one
big string.

## License

MIT

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