# sideboard

> A library with everything you need to set your (searchable data) tables right.

Latest version **0.6.0** (published 2018-12-13) · AGPL-3.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2018-12-13 |
| First published | 2018-01-19 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 899.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Ariana Giorgi, John Hancock and Allan James Vestal / The Dallas Morning News |
| Maintainers | achavez, agiorgi, ajv, jhancock, stephanielamm |
| Keywords | searchable, tables, data, tables, sortable, tables, sorted, tables, tables |

## Links

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

## Dependencies (7)

- [fuse.js](https://npm.io/package/fuse.js.md) ^3.2.0
- [numeral](https://npm.io/package/numeral.md) ^2.0.6
- [cash-dom](https://npm.io/package/cash-dom.md) ^1.3.7
- [papaparse](https://npm.io/package/papaparse.md) ^4.3.6
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.0.0
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.0
- [form-serialize](https://npm.io/package/form-serialize.md) ^0.7.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.6.0 (latest) — 2018-12-13
- 0.5.1 — 2018-12-13
- 0.5.0 — 2018-12-13
- 0.4.0 — 2018-07-13
- 0.3.10 — 2018-07-13
- 0.3.9 — 2018-05-24
- 0.3.8 — 2018-04-25
- 0.3.7 — 2018-04-16
- 0.3.6 — 2018-04-16
- 0.3.5 — 2018-04-16
- 0.3.4 — 2018-04-16
- 0.3.3 — 2018-04-16
- 0.3.2 — 2018-04-16
- 0.3.1 — 2018-04-16
- 0.3.0 — 2018-04-13
- … 2 more at https://npm.io/package/sideboard/versions

## README

# Sideboard

### Everything you need to set your tables right.

A "hack day" project from _The Dallas Morning News_.

### The sideboard stands alone

`sideboard` is built to be a lean table-setting machine. It requires just one external dependency — Papa Parse — and uses ES6-native functions for the rest of its features.

### Getting started
Sideboard is best used within an interactive or embed.

#### Installing and setting up Sideboard
Once you have your project created, run `npm install sideboard`.

- Sideboard depends on Font Awesome for some icons, so in your `index.html` file, be sure to include a call to Font Awesome. You can get the required `link` tag [here](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css).
- Sideboard also has specific styles, so be sure to import its styles. Add `@import '../../node_modules/sideboard/src/scss/styles';` to your `styles.scss` file.
- Import Sideboard into your js: `import Sideboard from 'sideboard';`
- Currently, Sideboard only supports csv. Place your csv file in your data folder.

#### Running Sideboard

Call Sideboard within your `scripts.js` file like so: window.sideboard = new Sideboard({});

The object passed to Sideboard has some required keys:

- `dataSource`: An object that defines the source of the data. Has keys for `type` (string), and `url` (string).
- `el`: String with the id ('#' included) of the div where you want to draw your table
- `resultsPerPage`: Integer specifying number of results per page of your table
- `filters`: An array of objects specifying what types of filters to use on which columns. Each filter object takes a `sourceField` (string) key and a `type` (string) key. `sourceField` is the column header you want the filter to apply to, `type` is the type of filter, expecting either a value of `searchbox` or `dropdown`.

    **New in version 0.3.9:** You can also now specify a `customMatchFn` property on filter configuration objects. This property should be a function which takes two arguments (the value of the row being tested and the value of the user's input, respectively) and returns either True or False depending on whether the row passes the filtering test.

- `columns`: An array of objects that defined the `sourceField` (a string of the column name), and a `publicLabel` ( a string of how you want the column name to be displayed). Can also take a type of `integer` for columns of numbers (not including percents or dollar figures). **New in version 0.4.0:** You can set a column to be unsortable by setting the sortable key to `false` on that column. Columns are sortable by default.


Example Sideboard call:
```javascript
window.sideboard = new Sideboard({
  dataSource: {
    type: 'csv',
    url: 'data/private-schools.csv',
  },
  el: '#sortable-table',
  resultsPerPage: 20,
  filters: [
    { sourceField: 'School Name', type: 'searchBox' },
    { sourceField: 'DistrictName', type: 'dropdown' },
  ],
  columns: [
    { sourceField: 'School Name', publicLabel: 'School name' },
    { sourceField: 'DistrictName', publicLabel: 'District name', sortable: 'false' },
    { sourceField: 'low', publicLabel: 'Low grade' },
    { sourceField: 'high', publicLabel: 'High grade' },
    { sourceField: 'enrollment', publicLabel: 'Enrollment', type: 'integer' },
  ],
  onInitialLoad: () => { pymChild.sendHeight(); },
})

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