ATTR TABLES

The Attr Tables extensions adds various features to attribute tables.

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-attr-tables");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/attr-tables.js";
  extension.id = "roamjs-attr-tables";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


Usage

The script supports the following configuration attributes, to be added in the [[roam/js/attr-tables]] page:

  • Max Sorts - (Optional) The maximum number of sorts that any table should support. When the max gets hit, the new sort column replaces the sort column of lowest priority.

Whenever you create an Attribute Table, there will be a new sort icon next to each of the column headers. Clicking the sort icon will toggle between three states: Neutral, Ascending, and Descending.

The table will then be sorted based on the columns you clicked on. A marker next to each column will appear to show the sort priority.

Because attribute tables are view only, navigating away from the page will wipe out any previous sort you had applied. To solve this, you could add a Default Sort attribute as a child. The value should be a comma delimited list of each column with the type of sort you want sorted. For example, if I wanted a table sorted first by "foo" column ascending, followed by "bar" column descending, I would use the following default sort value:

Default Sort:: foo=Asc, bar=Des

The Max Sorts DB level configuration could also be applied at a table level, by adding the attribute as a child of the table.

Filtering

To filter columns, each table supports an Include Columns configuration. As a child of the table, adding Include Columns will filter table down to the columns specified in the comma delimited list, in the order specified. For example,

Include Columns:: ---, attr-4, attr-2

Would filter an attr table down to include just the title column first, followed by the column headed by "attr-4", followed by the column headed by "attr-2".

To filter rows, Shawn Murphy has built a attribute table filter extension on top of this one. You could find it here!

Demo


Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

Other Extensions