Articles in this section

See more

Tables - Switching Rows and Columns

Customize a table by switching rows and columns.

(Play with this on CodePen)

Tables can be customized by configuring which elements should be shown in rows and columns.  If needed for multiple elements, rows will appear nested using a tree format and columns will appear as multiple rows of column headers.

This example also configures the column width for metrics to allow more room for the column headers.

 

Code snippet

Once you have added the StateBook files to the <head> section of your webpage, this is the only code you need:

<div id="statebook-content"></div>

<script>
  Statebook.displayData({
    authentication: 'demo',
    container: 'statebook-content',
    display: 'component',
    topic: 'dem-pop-age-gender',
    view: 'table:acs-pop',
    periods:['last5'],
    metric: 'val',
    rows: ['period'],
    columns: ['category','source','metric'],
    metricColumnWidth: 120
  });
</script>

 

Comments

0 comments

Article is closed for comments.