Table checklists

Table Checklist is a feature allowing users to create tables including a trackable checklist functionality that can help users keep track of things such as their game progress in wiki tables.

Progress tracking data is stored locally per-browser, which means it will not be synchronized between your devices even if you're logged in.

Usage

To create a checklist trackable table, simply add trackable class to its class list and remember to give it a unique id property. The ID has to be very specific and unique, as it will be critical for identifying the table and tracking the data inside of it. Keep in mind that tables can be included in other pages, so generic names that may occur in different tables should be avoided.

Checklist tables without an ID will be ignored. Using the same ID for multiple tables will cause errors.

Setting stable keys

By default, the "key" of a row is determined by the first column's value. If that column is not unique, or if it might get changed when the table is edited, then checkbox state can be lost. You can prevent that from happening by specifying your own stable keys.

There are two ways to set stable keys:

1. Marking columns as key candidates: In a column header cell, set data-is-row-key, for example !data-is-row-key | ID. If multiple cells are given this attribute, they will be concatenated together with ; ("semicolon space") as the delimiter. In general, you should set the minimum possible number of row key columns in order to keep each row unique, and most tables will only need one such column (generally ID number or name etc).
   • data-is-row-key stands on its own and does not require a value
2. Providing row keys manually: In a row, set data-row-key with a value. For example, you could set |- data-row-key="123; Stick". This property is intended to be used when your original stable key value needs to be changed, for example because a game updated the name of an item.

Rowspans & colspans

Tables with rowspans are not supported.

For colspans, the software will attempt to use the value as part of the row's stable key if any of the columns is marked as a key with data-is-row-key. This value will not be duplicated even if multiple columns included in the colspan are marked as keys with data-is-row-key.

CSS

You can customize checkbox appearance and behavior with CSS. For example, if you want to highlight each row that's checked, consider doing something like the following:

tr[data-row-key]:has(> td[data-mw-tcp="item"] > input:checked) {
  background: var(--some-custom-background-color); /* n.b. you would define this variable yourself in view-light and view-dark (and any other themes present) */
}

Please note that the :has selector is not supported by all browsers, but for cosmetic rules like this it's fine to use.

Examples

Tracked table

	Column 1	Column 2	Column 3
	Row1-1	Row1-2	Row1-3
	Row2-1	Row2-2	Row2-3
	Row3-1	Row3-2	Row3-3
	Row4-1	Row4-2	Row4-3

{| class="wikitable trackable" id="very-specific-id"
! Column 1 !! Column 2 !! Column 3
|-
| Row1-1 || Row1-2 || Row1-3
|-
| Row2-1 || Row2-2 || Row2-3
|-
| Row3-1 || Row3-2 || Row3-3
|-
| Row4-1 || Row4-2 || Row4-3
|}

Tracked sortable table

	Column 1	Column 2	Column 3
	Row1-1	Row1-2	Row1-3
	Row2-1	Row2-2	Row2-3
	Row3-1	Row3-2	Row3-3
	Row4-1	Row4-2	Row4-3

{| class="wikitable sortable trackable" id="different-specific-data"
! Column 1 !! Column 2 !! Column 3
|-
| Row1-1 || Row1-2 || Row1-3
|-
| Row2-1 || Row2-2 || Row2-3
|-
| Row3-1 || Row3-2 || Row3-3
|-
| Row4-1 || Row4-2 || Row4-3
|}

Tracked table with manual keys

Use dev tools/inspect element to see the results.

	Column 1	Column 2	Column 3
	Row1-1	Row1-2	Row1-3
	Row2-1	Row2-2	Row2-3
	Row3-1	Row3-2	Row3-3
	Row4-1	Row4-2	Row4-3

{| class="wikitable sortable trackable" id="even-more-different-data"
! Column 1 !! data-is-row-key | Column 2 !! data-is-row-key | Column 3
|-
| Row1-1 || Row1-2 || Row1-3
|-
| Row2-1 || Row2-2 || Row2-3
|- data-row-key="1234"
| Row3-1 || Row3-2 || Row3-3
|-
| Row4-1 || Row4-2 || Row4-3
|}