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.
• 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:

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(); },
})