Table

A Table is a structural component used to arrange data in rows and columns to facilitate the comparison, analysis and management of information.

Guidelines

When to use tables

In order to support the scanning and interpretation of information, the content within Tables needs to be well-structured and optimized for readability. For that reason, Tables should be avoided if the space is limited, if the interaction with their information is too complex, or if the data cannot be easily categorized. Additionally, consider alternative presentations for standalone information, or when detailed analysis isn't the primary objective.

When to use:

• When users need a systematic representation of information that allows them to compare and analyze multiple data points across different categories.
• When users need to perform specific actions to manipulate items within a dataset, such as editing, deleting, or organizing.
• When users can benefit from the ability to sort or filter data dynamically in order to extract conclusions.

When not to use:

• When the interaction with the data is too complex (e.g. there are interdependencies between data points).
• When space is constrained. Please find alternative methods to display the information in case the readability of the Table content is compromised.
• When the goal is to create simple, non-data-centric layouts. Opt for lists or other components in case there aren’t multiple data points to compare, and the information doesn’t require manipulation (sorting, filtering).
• When the user's primary goal is to obtain a high-level overview rather than detailed, more granular, analysis of the information. Alternative visualization methods such as summaries, charts, or lists may be more suitable for providing an overview.
• When information is standalone and doesn't require side-by-side comparison, consider using text, lists, or Cards instead.

Specifications

1. Header (optional)
   Tables can feature a header section with elements such as a visible caption or actions that can be applied to Table rows in bulk.

2. Caption
   A caption provides a clear and concise description of the contents and the purpose of the Table. It is key for accessibility, and must always be provided for users of assistive technology. The caption can be visually hidden if a visible caption is not needed (e.g. if there is a heading above the Table that serves as a title).

3. Actions (optional)
   Actions that can be applied to all the items within a Table should be made available from the header.

4. Selection (optional)
   Row selection can be enabled to allow targeting the items that will be affected by Table actions. The checkbox available at the heading row level allows selecting all Table items at once, while individual checkboxes allow the selection of independent rows. A custom indicator of the number of selected rows can be included in the Table’s header for visibility (See custom header text).

5. Headings
   Tables can feature column headings (most commonly), row headings, or both. Headings are used to describe the type of information or the category of the data contained by the list of elements they label. Column headings are required.

6. Sorting (optional)
   Sorting allows users to organize data in an ascending or descending order according to specific criteria (e.g. alphabetically). It facilitates the analysis of data, identification of patterns, and comparison of values within Tables.

7. Cell
   Table cells are individual units of information, organized at the intersection of rows and columns. They can contain any sort of content, from simple text to iconography, images and components in any necessary order or combination.

8. Footer (optional)
   Tables can feature an optional footer to organize adjacent Table information or actions (e.g. pagination). The configuration and contents of the Table footer are fully customizable.

Table and column width

Tables will occupy the full width of the area assigned to them in a layout. The available space will be distributed across Table columns evenly, depending on the data they contain.

Tables are optimized for readability by default, but there might be special cases where adjustments might be needed. If so, it is possible to adjust the width of individual columns to distribute space more intentionally:

Column and row headings

Tables can display column headings, row headings, or both.

Column headings represent the category or type of information contained in each Table column. They are essential for the quick identification of the Table’s content.

Row headings are useful when there’s a need to further categorize or label the data presented in individual or sets of rows. In Tables with many items, row headings can serve as navigation aids, allowing users to quickly jump to specific sections or categories within the data structure. Please note that you might or might not include a column heading to give a title to the row headings column.

Cell customization

Table cells can include combinations of any type of content: from text with end or start icons, to images or even components. This level of cell customization allows covering a wide range of presentational and interactive use cases like, for example, the introduction of inline, row actions:

Types

Table with vertical borders

By default, the Table component will only display horizontal borders to separate rows and rely on spacing to create columns. Vertical borders can be added in data-heavy Tables, where the cell content is too clumped and mistakes might be made when interpreting the data.[1]

Common scenarios where the use of vertical borders is recommended include: when presenting data with lengthy textual descriptions or explanations alongside numerical values, in Tables with a long list of narrow columns, or when combining data with different horizontal alignment (see example below).

Table with sorting

Sorting allows reordering all the items included in a Table based on the values of one of its columns. Any number of columns can be sortable, but data can only be sorted by one column at a time.

Table with row selection

Enable row selection when the same action(s) can be applied to all of the items in a Table. We recommend including an indicator of the amount of selected items within the Table’s header.

When selection is enabled, users can pick out rows individually, or use the checkbox included at the heading level to select or deselect all Table items at once:

Empty table

Tables can dynamically feature an empty state message in case there is no information available to be displayed:

Interaction states

Heading sorting states

Heading cells that include sorting functionality display a hovered state, an active state when clicked or tapped, and a focused style after having been activated and until any other interaction takes place.

1. Default
2. Hover
3. Active
4. Focused

Row selection states

In Tables where selection is available, rows present the following styles:

1. Default
2. Selected

The heading-level checkbox, which facilitates the simultaneous selection and deselection of all Table items, will present an indeterminate state in case some items remain unselected. Please note that, while Table rows display a selected state, only the checkboxes are interactive (See 2).

Best practices

Table actions

It is possible to use the header to provide actions that can be applied to all Table items. Enabling selection will allow users to target the Table items to be manipulated.

Do:

• Use normal or quiet Buttons to represent Table actions.
• Use any of the Button actions (neutral, progressive, and destructive)

Don't:

• Use primary Buttons to represent Table actions, since they might compete with main page actions. (Exceptions might apply).
• Use icon-only buttons to represent Table actions, since they might complicate understanding. Exceptions do apply, e.g. in cases where space is scarce, or when they are used to trigger related actions in a menu or modal.

Make sure to follow the button and groups of buttons usage recommendations when defining the best way to represent actions, keeping the Table’s external context in mind too.

Inline actions

It is possible to customize Table cells, and include inline actions in them that allow manipulating the data of individual rows. Although exceptions might apply, we only recommend using inline actions in Tables that will display fewer rows (less than 5) by default.

Do:

• Use the cell slot to provide inline actions in Tables with fewer items.

Don't:

• Use inline actions in Tables with more than 5 rows. Instead, use the header slot to provide bulk actions and enable selection.

Table width

Achieving the optimal readability of Table content should be the guiding factor when defining the width of a Table within a composition. Strive to balance information density with legibility, ensuring that Tables occupy just the appropriate amount of space.

Avoid using Tables in narrow spaces. This can cause their content to wrap too tightly, or unnecessarily trigger the Table’s default horizontal scroll. At the same time, refrain from overstretching Tables to make them fit wider layouts: embedding too much white space within cells will make their information harder to parse and compare.

Do:

• Use Tables in layouts where they’ll have enough space to display all relevant information clearly and comprehensively.

Don't:

• Use Tables within limited spaces, where their content might have to adjust to the point of compromising readability.
• Use Tables in wide areas, where they’ll overstretch, complicating the parsing and comparison of information.

Content

Table caption

The caption provides a clear and succinct description of the content and purpose of a Table. It can be visually hidden, or replaced by an external title if a design either requires or allows it. Regardless of its visibility, a caption should always be defined in the Table’s code in order to provide context for users of assistive technology.[2]

Visible or not, make sure the caption conveys the Table's content and context in a concise and accurate way.

To keep captions readable, don’t exceed a line length of 75 characters. You can apply a maximum width to the caption if necessary in order to follow this recommendation.

Heading content

Do not rely on iconography alone to represent categorical information in headings, as it might be hard to understand based on the content of the surrounding cells alone:

Cell content alignment

Except for numbers, text within cells should be aligned left or right, according to the directionality of the user’s interface language.

Numbers that express quantities should always be aligned right, regardless of the directionality of the user’s interface language. This helps readers make easier comparisons of values when scanning down columns. For consistency and ease of understanding, the alignment of headings should always match the alignment of the data.[1]

Keyboard navigation

Key	Function
Tab	It moves the focus to the next interactive element within the Table.
Shift+Tab	It moves the focus to the previous interactive element within the Table.
Up arrow, Down arrow	For assistive technology users, these keys move between the column cells.
Left arrow, Right arrow	For assistive technology users, these keys move between the row cells.

References

1. Web Typography: Designing Tables to be Read, Not Looked At by Richard Rutter
2. Inclusive Components: Data Tables, by Heydon Pickering

Demos

Configurable

1912 Olympics — Men's marathon

1912 Olympics — Men's marathon

Athlete	Nation	Rank	Time
Ken McArthur	South Africa	1	2:36:54.8
Christian Gitsham	South Africa	2	2:37:52.0
Gaston Strobino	United States	3	2:38:42.4
Shizo Kanakuri	Japan	36	54:08:06:05:32:20.3

Name	Value
Props
caption
hideCaption
useRowHeaders
showVerticalBorders
Slots
header
footer
View
Reading direction	Left to right (LTR) Right to left (RTL)

With custom-sized columns

The TableColumn type has optional properties for width and minWidth so you can customize each column's size. Include the units, e.g. '120px' or '100%'.

Waves of Feminism

Waves of Feminism

Wave	Years	Overview	Main figures
First wave	Late 19th to early 20th century	Focused on women's suffrage and legal rights, addressing inequalities in the public sphere.	Susan B. Anthony, Elizabeth Cady Stanton
Second wave	1960s to 1980s	Centered on women's liberation and social equality, addressing issues such as reproductive rights, workplace discrimination, and sexual liberation.	Betty Friedan, Gloria Steinem, Simone de Beauvoir
Third wave	1990s to early 2000s	Emphasized diversity and intersectionality, addressing issues of race, class, sexuality, and gender identity. Advocated for inclusivity and challenging stereotypes.	bell hooks, Kimberlé Crenshaw, Judith Butler
Fourth wave	Early 2010s to present	Characterized by a focus on the empowerment of women through the use of internet tools, and intersectionality. The fourth wave seeks greater gender equality by focusing on gendered norms and the marginalization of women in society.	Tarana Burke, Chimamanda Ngozi Adichie, Roxane Gay

Latest update: April 10, 2024

NPM

<template>
	<cdx-table
		caption="Waves of Feminism"
		:columns="columns"
		:data="data"
		:use-row-headers="true"
	>
		<template #footer>
			Latest update: April 10, 2024
		</template>
	</cdx-table>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxTable } from '@wikimedia/codex';

export default defineComponent( {
	name: 'TableColumnWidth',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'wave', label: 'Wave', minWidth: '112px' },
			{ id: 'years', label: 'Years', minWidth: '112px' },
			{ id: 'overview', label: 'Overview', minWidth: '320px' },
			{ id: 'figures', label: 'Main figures', minWidth: '160px' }
		];

		const data = [
			{
				wave: 'First wave',
				years: 'Late 19th to early 20th century',
				overview: 'Focused on women\'s suffrage and legal rights, addressing inequalities in the public sphere.',
				figures: 'Susan B. Anthony, Elizabeth Cady Stanton'
			},
			{
				wave: 'Second wave',
				years: '1960s to 1980s',
				overview: 'Centered on women\'s liberation and social equality, addressing issues such as reproductive rights, workplace discrimination, and sexual liberation.',
				figures: 'Betty Friedan, Gloria Steinem, Simone de Beauvoir'
			},
			{
				wave: 'Third wave',
				years: '1990s to early 2000s',
				overview: 'Emphasized diversity and intersectionality, addressing issues of race, class, sexuality, and gender identity. Advocated for inclusivity and challenging stereotypes.',
				figures: 'bell hooks, Kimberlé Crenshaw, Judith Butler'
			},
			{
				wave: 'Fourth wave',
				years: 'Early 2010s to present',
				overview: 'Characterized by a focus on the empowerment of women through the use of internet tools, and intersectionality. The fourth wave seeks greater gender equality by focusing on gendered norms and the marginalization of women in society.',
				figures: 'Tarana Burke, Chimamanda Ngozi Adichie, Roxane Gay'
			}
		];

		return {
			columns,
			data
		};
	}
} );
</script>

MediaWiki

<template>
	<cdx-table
		caption="Waves of Feminism"
		:columns="columns"
		:data="data"
		:use-row-headers="true"
	>
		<template #footer>
			Latest update: April 10, 2024
		</template>
	</cdx-table>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxTable } = require( '@wikimedia/codex' );

module.exports = defineComponent( {
	name: 'TableColumnWidth',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'wave', label: 'Wave', minWidth: '112px' },
			{ id: 'years', label: 'Years', minWidth: '112px' },
			{ id: 'overview', label: 'Overview', minWidth: '320px' },
			{ id: 'figures', label: 'Main figures', minWidth: '160px' }
		];

		const data = [
			{
				wave: 'First wave',
				years: 'Late 19th to early 20th century',
				overview: 'Focused on women\'s suffrage and legal rights, addressing inequalities in the public sphere.',
				figures: 'Susan B. Anthony, Elizabeth Cady Stanton'
			},
			{
				wave: 'Second wave',
				years: '1960s to 1980s',
				overview: 'Centered on women\'s liberation and social equality, addressing issues such as reproductive rights, workplace discrimination, and sexual liberation.',
				figures: 'Betty Friedan, Gloria Steinem, Simone de Beauvoir'
			},
			{
				wave: 'Third wave',
				years: '1990s to early 2000s',
				overview: 'Emphasized diversity and intersectionality, addressing issues of race, class, sexuality, and gender identity. Advocated for inclusivity and challenging stereotypes.',
				figures: 'bell hooks, Kimberlé Crenshaw, Judith Butler'
			},
			{
				wave: 'Fourth wave',
				years: 'Early 2010s to present',
				overview: 'Characterized by a focus on the empowerment of women through the use of internet tools, and intersectionality. The fourth wave seeks greater gender equality by focusing on gendered norms and the marginalization of women in society.',
				figures: 'Tarana Burke, Chimamanda Ngozi Adichie, Roxane Gay'
			}
		];

		return {
			columns,
			data
		};
	}
} );
</script>

With custom cell content

By default, the data provided for a cell will be rendered within it as-is. You can customize the contents of a cell by using the item-[ columnId ] slots. For example, for a column with the id time, there is a slot called item-time. This slot comes with 2 bindings:

• item: the cell content
• row: data for the entire row

Active blocks

Active blocks

Timestamp	Target	Block parameters	Actions
16:58, 2023-11-30	Username1	editing (sitewide) account creation disabled
15:16, 2023-11-23	Username2	account creation disabled
11:13, 2023-11-12	Username3	autoblock disabled account creation disabled

NPM

<template>
	<cdx-table
		class="cdx-docs-table-custom-cells"
		caption="Active blocks"
		:columns="columns"
		:data="data"
	>
		<!-- Get cell data and output it in a specific format. -->
		<template #item-time="{ item }">
			{{ getFormattedDate( item ) }}
		</template>

		<!-- Get cell data, an array in this case, and output it as a list. -->
		<template #item-parameters="{ item }">
			<ul>
				<li v-for="( parameter, index ) in item" :key="index">
					{{ parameter }}
				</li>
			</ul>
		</template>

		<!-- Get data for the entire row so we can grab the block id and perform an action. -->
		<template #item-actions="{ row }">
			<div class="cdx-docs-table-custom-cells__actions">
				<cdx-button
					weight="quiet"
					aria-label="Edit"
					@click="editBlock( row.id )"
				>
					<cdx-icon :icon="cdxIconEdit" />
				</cdx-button>
				<cdx-button
					weight="quiet"
					action="destructive"
					aria-label="Remove"
					@click="removeBlock( row.id )"
				>
					<cdx-icon :icon="cdxIconTrash" />
				</cdx-button>
			</div>
		</template>
	</cdx-table>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxTable, CdxButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconEdit, cdxIconTrash } from '@wikimedia/codex-icons';
import getFormattedDate from '../../../src/utils/getFormattedDate';

export default defineComponent( {
	name: 'TableCustomCells',
	components: { CdxTable, CdxButton, CdxIcon },
	setup() {
		const columns = [
			{ id: 'time', label: 'Timestamp' },
			{ id: 'target', label: 'Target' },
			{ id: 'parameters', label: 'Block parameters' },
			{ id: 'actions', label: 'Actions' }
		];

		const data = [
			{
				id: 1236,
				time: 1701363480000,
				target: 'Username1',
				parameters: [ 'editing (sitewide)', 'account creation disabled' ]
			},
			{
				id: 1235,
				time: 1700752560000,
				target: 'Username2',
				parameters: [ 'account creation disabled' ]
			},
			{
				id: 1234,
				time: 1699787580000,
				target: 'Username3',
				parameters: [ 'autoblock disabled', 'account creation disabled' ]
			}
		];

		function editBlock( blockId ) {
			// eslint-disable-next-line no-console
			console.log( 'Edit block ' + blockId );
		}

		function removeBlock( blockId ) {
			// eslint-disable-next-line no-console
			console.log( 'Remove block ' + blockId );
		}

		return {
			columns,
			data,
			cdxIconEdit,
			cdxIconTrash,
			editBlock,
			removeBlock,
			getFormattedDate
		};
	}
} );
</script>

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-docs-table-custom-cells {
	ul {
		margin: 0;
		padding-left: @spacing-100;
	}

	&__actions {
		display: flex;
		gap: @spacing-50;
	}
}
</style>

MediaWiki

<template>
	<cdx-table
		class="cdx-docs-table-custom-cells"
		caption="Active blocks"
		:columns="columns"
		:data="data"
	>
		<!-- Get cell data and output it in a specific format. -->
		<template #item-time="{ item }">
			{{ getFormattedDate( item ) }}
		</template>

		<!-- Get cell data, an array in this case, and output it as a list. -->
		<template #item-parameters="{ item }">
			<ul>
				<li v-for="( parameter, index ) in item" :key="index">
					{{ parameter }}
				</li>
			</ul>
		</template>

		<!-- Get data for the entire row so we can grab the block id and perform an action. -->
		<template #item-actions="{ row }">
			<div class="cdx-docs-table-custom-cells__actions">
				<cdx-button
					weight="quiet"
					aria-label="Edit"
					@click="editBlock( row.id )"
				>
					<cdx-icon :icon="cdxIconEdit"></cdx-icon>
				</cdx-button>
				<cdx-button
					weight="quiet"
					action="destructive"
					aria-label="Remove"
					@click="removeBlock( row.id )"
				>
					<cdx-icon :icon="cdxIconTrash"></cdx-icon>
				</cdx-button>
			</div>
		</template>
	</cdx-table>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxTable, CdxButton, CdxIcon } = require( '@wikimedia/codex' );
const { cdxIconEdit, cdxIconTrash } = require( './icons.json' );
const getFormattedDate = require( '../../../src/utils/getFormattedDate' );

module.exports = defineComponent( {
	name: 'TableCustomCells',
	components: { CdxTable, CdxButton, CdxIcon },
	setup() {
		const columns = [
			{ id: 'time', label: 'Timestamp' },
			{ id: 'target', label: 'Target' },
			{ id: 'parameters', label: 'Block parameters' },
			{ id: 'actions', label: 'Actions' }
		];

		const data = [
			{
				id: 1236,
				time: 1701363480000,
				target: 'Username1',
				parameters: [ 'editing (sitewide)', 'account creation disabled' ]
			},
			{
				id: 1235,
				time: 1700752560000,
				target: 'Username2',
				parameters: [ 'account creation disabled' ]
			},
			{
				id: 1234,
				time: 1699787580000,
				target: 'Username3',
				parameters: [ 'autoblock disabled', 'account creation disabled' ]
			}
		];

		function editBlock( blockId ) {
			// eslint-disable-next-line no-console
			console.log( 'Edit block ' + blockId );
		}

		function removeBlock( blockId ) {
			// eslint-disable-next-line no-console
			console.log( 'Remove block ' + blockId );
		}

		return {
			columns,
			data,
			cdxIconEdit,
			cdxIconTrash,
			editBlock,
			removeBlock,
			getFormattedDate
		};
	}
} );
</script>

<style lang="less">
@import 'mediawiki.skin.variables.less';

.cdx-docs-table-custom-cells {
	ul {
		margin: 0;
		padding-left: @spacing-100;
	}

	&__actions {
		display: flex;
		gap: @spacing-50;
	}
}
</style>

With custom table elements

You can further customize the layout of your Table by using the thead, tbody, and tfoot slots. Using these slots will override the default implementation of that element within the Table component so you can include your own markup. The example below uses the thead slot to add th elements with custom colspan and rowspan attributes, and the tfoot slot to add a <tfoot> with totals below the <tbody>.

You can use any combination of these slots. Note that in the example below, even though we are including custom thead markup, we are still passing in the columns prop so that the Table component can output the data in the <tbody>. Always pass in columns, unless you are using the slots to override both the <thead> and <tbody>.

Cell data is aligned to the start of the cell by default. You can use the following CSS classes to change the alignment of cell data:

• cdx-table__table__cell--align-center: Align content to the center of the cell
• cdx-table__table__cell--align-end: Align content to the end of the cell (to the right in LTR and to the left in RTL)
• cdx-table__table__cell--align-number: Align content to the right of the cell in both reading directionalities. This is recommended for columns that contain numerical values.

List of MediaWikis

List of MediaWikis

Project	No. of wikis	Users
		Active	All
wikipedias	342	292249	113556337
wiktionaries	193	5764	7275027
wikiquotes	96	2042	4261041
Total:	631	300055	125092405

NPM

<template>
	<cdx-table
		caption="List of MediaWikis"
		:columns="columns"
		:data="data"
		:show-vertical-borders="true"
	>
		<template #thead>
			<thead>
				<tr>
					<th scope="col" rowspan="2">
						Project
					</th>
					<th
						scope="col"
						rowspan="2"
						class="cdx-table__table__cell--align-number"
					>
						No. of wikis
					</th>
					<th
						scope="colgroup"
						colspan="2"
						class="cdx-table__table__cell--align-center"
					>
						Users
					</th>
				</tr>
				<tr>
					<th scope="col" class="cdx-table__table__cell--align-number">
						Active
					</th>
					<th scope="col" class="cdx-table__table__cell--align-number">
						All
					</th>
				</tr>
			</thead>
		</template>

		<template #tfoot>
			<tfoot>
				<tr>
					<th scope="row">
						Total:
					</th>
					<td
						v-for="( total, index ) in totals"
						:key="index"
						class="cdx-table__table__cell--align-number"
					>
						{{ total }}
					</td>
				</tr>
			</tfoot>
		</template>
	</cdx-table>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxTable } from '@wikimedia/codex';

export default defineComponent( {
	name: 'TableWithSlots',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'wiki' },
			{ id: 'nowikis', textAlign: 'number' },
			{ id: 'activeusers', textAlign: 'number' },
			{ id: 'users', textAlign: 'number' }
		];

		const data = [
			{
				wiki: 'wikipedias',
				nowikis: 342,
				activeusers: 292249,
				users: 113556337
			},
			{
				wiki: 'wiktionaries',
				nowikis: 193,
				activeusers: 5764,
				users: 7275027
			},
			{
				wiki: 'wikiquotes',
				nowikis: 96,
				activeusers: 2042,
				users: 4261041
			}
		];

		const totals = data.reduce( ( a, b ) => [
			a[ 0 ] + b.nowikis,
			a[ 1 ] + b.activeusers,
			a[ 2 ] + b.users
		], [ 0, 0, 0 ] );

		return {
			columns,
			data,
			totals
		};
	}
} );
</script>

MediaWiki

<template>
	<cdx-table
		caption="List of MediaWikis"
		:columns="columns"
		:data="data"
		:show-vertical-borders="true"
	>
		<template #thead>
			<thead>
				<tr>
					<th scope="col" rowspan="2">
						Project
					</th>
					<th
						scope="col"
						rowspan="2"
						class="cdx-table__table__cell--align-number"
					>
						No. of wikis
					</th>
					<th
						scope="colgroup"
						colspan="2"
						class="cdx-table__table__cell--align-center"
					>
						Users
					</th>
				</tr>
				<tr>
					<th scope="col" class="cdx-table__table__cell--align-number">
						Active
					</th>
					<th scope="col" class="cdx-table__table__cell--align-number">
						All
					</th>
				</tr>
			</thead>
		</template>

		<template #tfoot>
			<tfoot>
				<tr>
					<th scope="row">
						Total:
					</th>
					<td
						v-for="( total, index ) in totals"
						:key="index"
						class="cdx-table__table__cell--align-number"
					>
						{{ total }}
					</td>
				</tr>
			</tfoot>
		</template>
	</cdx-table>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxTable } = require( '@wikimedia/codex' );

module.exports = defineComponent( {
	name: 'TableWithSlots',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'wiki' },
			{ id: 'nowikis', textAlign: 'number' },
			{ id: 'activeusers', textAlign: 'number' },
			{ id: 'users', textAlign: 'number' }
		];

		const data = [
			{
				wiki: 'wikipedias',
				nowikis: 342,
				activeusers: 292249,
				users: 113556337
			},
			{
				wiki: 'wiktionaries',
				nowikis: 193,
				activeusers: 5764,
				users: 7275027
			},
			{
				wiki: 'wikiquotes',
				nowikis: 96,
				activeusers: 2042,
				users: 4261041
			}
		];

		const totals = data.reduce( ( a, b ) => [
			a[ 0 ] + b.nowikis,
			a[ 1 ] + b.activeusers,
			a[ 2 ] + b.users
		], [ 0, 0, 0 ] );

		return {
			columns,
			data,
			totals
		};
	}
} );
</script>

With sorting

To enable sorting, pass in the sort prop via v-model, and make at least one Table column sortable by adding allowSort: true to its definition.

You can initialize the sort ref to an empty object if there is no initial sort order, or to an initial sort order as in the Table below, where the initial sort order is { user: 'asc' }.

WARNING

For translatable interfaces, make sure you also use the sortCaption prop to provide a translated string for this visually-hidden accessibility helper.

Contributions

Contributions , column headers with buttons are sortable.

Username1	de.wikipedia	Bahnstromleitung	06:12, 2023-12-28	+9
Username2	commons.wikimedia	Xanthium.jpg	11:12, 2024-01-02	-70
Username3	de.wikipedia	Berlin	16:58, 2024-01-04	+652
Username4	en.wikipedia	Stability Model	16:25, 2023-12-14	+42

NPM

<template>
	<cdx-table
		v-model:sort="sort"
		class="cdx-docs-table-with-sort"
		caption="Contributions"
		:columns="columns"
		:data="data"
		@update:sort="onSort"
	>
		<template #item-wiki="{ item }">
			<a :href="`https://${ item }.org`">{{ item }}</a>
		</template>

		<template #item-date="{ item }">
			{{ getFormattedDate( item ) }}
		</template>

		<template #item-size="{ item }">
			<span v-if="item > 0" class="cdx-docs-table-with-sort__size--positive">
				+{{ item }}
			</span>
			<span v-else-if="item === 0">
				{{ item }}
			</span>
			<span v-else class="cdx-docs-table-with-sort__size--negative">
				{{ item }}
			</span>
		</template>
	</cdx-table>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxTable } from '@wikimedia/codex';
import getFormattedDate from '../../../src/utils/getFormattedDate';

export default defineComponent( {
	name: 'TableWithSort',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'user', label: 'Username', allowSort: true },
			{ id: 'wiki', label: 'Wiki project', allowSort: true },
			{ id: 'title', label: 'Page title', allowSort: true },
			{ id: 'date', label: 'Date', allowSort: true, textAlign: 'number' },
			{ id: 'size', label: 'Size', allowSort: true, textAlign: 'number' }
		];

		// Data is a ref so we can change it on sort.
		const data = ref( [
			{
				user: 'Username1',
				wiki: 'de.wikipedia',
				title: 'Bahnstromleitung',
				date: 1703743920000,
				size: 9
			},
			{
				user: 'Username2',
				wiki: 'commons.wikimedia',
				title: 'Xanthium.jpg',
				date: 1704193920000,
				size: -70
			},
			{
				user: 'Username3',
				wiki: 'de.wikipedia',
				title: 'Berlin',
				date: 1704387480000,
				size: 652
			},
			{
				user: 'Username4',
				wiki: 'en.wikipedia',
				title: 'Stability Model',
				date: 1702571100000,
				size: 42
			}
		] );

		// Initially sort by username.
		// eslint-disable-next-line jsdoc/valid-types
		/** @type {import('vue').Ref<import('@wikimedia/codex').TableSort>} */
		const sort = ref( { user: 'asc' } );

		function onSort( newSort ) {
			const sortKey = Object.keys( newSort )[ 0 ];
			const sortOrder = newSort[ sortKey ];

			function sortNumerically( columnId, sortDir ) {
				return data.value.sort( ( a, b ) => {
					if ( sortDir === 'asc' ) {
						return b[ columnId ] - a[ columnId ];
					}
					return a[ columnId ] - b[ columnId ];
				} );
			}

			function sortAlphabetically( columnId, sortDir ) {
				return data.value.sort( ( a, b ) => {
					const multiplier = sortDir === 'asc' ? 1 : -1;
					return multiplier * ( a[ columnId ].localeCompare( b[ columnId ] ) );
				} );
			}

			// If the new sort order is 'none', go back to the initial sort.
			if ( sortOrder === 'none' ) {
				data.value = sortAlphabetically( 'user', 'asc' );
				sort.value = { user: 'asc' };
				return;
			}

			// Sort data.
			switch ( sortKey ) {
				case 'user':
				case 'wiki':
				case 'title':
					data.value = sortAlphabetically( sortKey, sortOrder );
					return;
				case 'date':
				case 'size':
					data.value = sortNumerically( sortKey, sortOrder );
					return;
				default:
					return;
			}
		}

		return {
			columns,
			data,
			sort,
			onSort,
			getFormattedDate
		};
	}
} );
</script>

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-docs-table-with-sort {
	&__size {
		&--positive {
			color: @color-success;
		}

		&--negative {
			color: @color-destructive;
		}
	}
}
</style>

MediaWiki

<template>
	<cdx-table
		v-model:sort="sort"
		class="cdx-docs-table-with-sort"
		caption="Contributions"
		:columns="columns"
		:data="data"
		@update:sort="onSort"
	>
		<template #item-wiki="{ item }">
			<a :href="`https://${ item }.org`">{{ item }}</a>
		</template>

		<template #item-date="{ item }">
			{{ getFormattedDate( item ) }}
		</template>

		<template #item-size="{ item }">
			<span v-if="item > 0" class="cdx-docs-table-with-sort__size--positive">
				+{{ item }}
			</span>
			<span v-else-if="item === 0">
				{{ item }}
			</span>
			<span v-else class="cdx-docs-table-with-sort__size--negative">
				{{ item }}
			</span>
		</template>
	</cdx-table>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxTable } = require( '@wikimedia/codex' );
const getFormattedDate = require( '../../../src/utils/getFormattedDate' );

module.exports = defineComponent( {
	name: 'TableWithSort',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'user', label: 'Username', allowSort: true },
			{ id: 'wiki', label: 'Wiki project', allowSort: true },
			{ id: 'title', label: 'Page title', allowSort: true },
			{ id: 'date', label: 'Date', allowSort: true, textAlign: 'number' },
			{ id: 'size', label: 'Size', allowSort: true, textAlign: 'number' }
		];

		// Data is a ref so we can change it on sort.
		const data = ref( [
			{
				user: 'Username1',
				wiki: 'de.wikipedia',
				title: 'Bahnstromleitung',
				date: 1703743920000,
				size: 9
			},
			{
				user: 'Username2',
				wiki: 'commons.wikimedia',
				title: 'Xanthium.jpg',
				date: 1704193920000,
				size: -70
			},
			{
				user: 'Username3',
				wiki: 'de.wikipedia',
				title: 'Berlin',
				date: 1704387480000,
				size: 652
			},
			{
				user: 'Username4',
				wiki: 'en.wikipedia',
				title: 'Stability Model',
				date: 1702571100000,
				size: 42
			}
		] );

		// Initially sort by username.
		// eslint-disable-next-line jsdoc/valid-types
		/** @type {import('vue').Ref<import('@wikimedia/codex').TableSort>} */
		const sort = ref( { user: 'asc' } );

		function onSort( newSort ) {
			const sortKey = Object.keys( newSort )[ 0 ];
			const sortOrder = newSort[ sortKey ];

			function sortNumerically( columnId, sortDir ) {
				return data.value.sort( ( a, b ) => {
					if ( sortDir === 'asc' ) {
						return b[ columnId ] - a[ columnId ];
					}
					return a[ columnId ] - b[ columnId ];
				} );
			}

			function sortAlphabetically( columnId, sortDir ) {
				return data.value.sort( ( a, b ) => {
					const multiplier = sortDir === 'asc' ? 1 : -1;
					return multiplier * ( a[ columnId ].localeCompare( b[ columnId ] ) );
				} );
			}

			// If the new sort order is 'none', go back to the initial sort.
			if ( sortOrder === 'none' ) {
				data.value = sortAlphabetically( 'user', 'asc' );
				sort.value = { user: 'asc' };
				return;
			}

			// Sort data.
			switch ( sortKey ) {
				case 'user':
				case 'wiki':
				case 'title':
					data.value = sortAlphabetically( sortKey, sortOrder );
					return;
				case 'date':
				case 'size':
					data.value = sortNumerically( sortKey, sortOrder );
					return;
				default:
					return;
			}
		}

		return {
			columns,
			data,
			sort,
			onSort,
			getFormattedDate
		};
	}
} );
</script>

<style lang="less">
@import 'mediawiki.skin.variables.less';

.cdx-docs-table-with-sort {
	&__size {
		&--positive {
			color: @color-success;
		}

		&--negative {
			color: @color-destructive;
		}
	}
}
</style>

With selection

To enable row selection, set the useRowSelection prop to true, and use v-model to bind the selectedRows prop.

WARNING

For translatable interfaces, make sure you also use the selectAllLabel and selectRowLabel props to provide translated strings for these visually-hidden accessibility helpers.

Tests

0 items selected

Tests

Select all rows	Name	Status	English verb to agent noun
Select row 1 of 4	"illustrate" -> "illustrator"	Connected	Failed
Select row 2 of 4	"listen" -> "listener"	Connected	Passed
Select row 3 of 4	"mentor" -> "mentor"	Connected	Passed
Select row 4 of 4	"swim" -> "swimmer"	Connected	Failed

NPM

<template>
	<cdx-table
		v-model:selected-rows="selectedRows"
		class="cdx-docs-table-with-selection"
		caption="Tests"
		:columns="columns"
		:data="data"
		:use-row-selection="true"
	>
		<template #header>
			<div class="cdx-docs-table-with-selection__header-content">
				<span>
					{{ selectedRows.length }} items selected
				</span>
				<span class="cdx-docs-table-with-selection__header-content__buttons">
					<cdx-button @click="handleRerun">
						Rerun
					</cdx-button>
					<cdx-button @click="handleDisconnect">
						Disconnect
					</cdx-button>
				</span>
			</div>
		</template>

		<template #item-name="{ item }">
			<a :href="item.url">{{ item.label }}</a>
		</template>

		<template #item-status="{ item }">
			<cdx-info-chip :status="item ? 'success' : 'warning'">
				{{ item ? 'Connected' : 'Disconnected' }}
			</cdx-info-chip>
		</template>

		<template #item-result="{ item }">
			<cdx-icon
				:class="getIconClass( item )"
				:icon="item ? cdxIconCheck : cdxIconClose"
			/>
			{{ item ? 'Passed' : 'Failed' }}
		</template>
	</cdx-table>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxTable, CdxButton, CdxInfoChip, CdxIcon } from '@wikimedia/codex';
import { cdxIconCheck, cdxIconClose } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'TableWithSelection',
	components: { CdxTable, CdxButton, CdxInfoChip, CdxIcon },
	setup() {
		// eslint-disable-next-line jsdoc/valid-types
		/** @type {import('vue').Ref<number[]>} */
		const selectedRows = ref( [] );

		const columns = [
			{ id: 'name', label: 'Name', minWidth: '200px' },
			{ id: 'status', label: 'Status' },
			{ id: 'result', label: 'English verb to agent noun' }
		];

		const data = ref( [
			{
				name: {
					label: '"illustrate" -> "illustrator"',
					url: 'https://www.wikifunctions.org/view/en/Z11401'
				},
				status: true,
				result: false
			},
			{
				name: {
					label: '"listen" -> "listener"',
					url: 'https://www.wikifunctions.org/view/en/Z11405'
				},
				status: true,
				result: true
			},
			{
				name: {
					label: '"mentor" -> "mentor"',
					url: 'https://www.wikifunctions.org/view/en/Z11402'
				},
				status: true,
				result: true
			},
			{
				name: {
					label: '"swim" -> "swimmer"',
					url: 'https://www.wikifunctions.org/view/en/Z11404'
				},
				status: true,
				result: false
			}
		] );

		/**
		 * Rerun the test. In this simple example, this just changes any failing
		 * tests to passing.
		 */
		function handleRerun() {
			for ( const index of selectedRows.value ) {
				data.value[ index ].result = true;
			}
		}

		/**
		 * Disconnect selected tests.
		 */
		function handleDisconnect() {
			for ( const index of selectedRows.value ) {
				data.value[ index ].status = false;
			}
		}

		function getIconClass( result ) {
			const iconClassModifier = result ? 'pass' : 'fail';
			return {
				[ `cdx-docs-table-with-selection__icon--${ iconClassModifier }` ]: true
			};
		}

		return {
			selectedRows,
			columns,
			data,
			handleRerun,
			handleDisconnect,
			getIconClass,
			cdxIconCheck,
			cdxIconClose
		};
	}
} );
</script>

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-docs-table-with-selection {
	&__header-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: @spacing-50;

		&__buttons {
			display: flex;
			gap: @spacing-50;
		}
	}

	& &__icon {
		&--pass {
			color: @color-success;
		}

		&--fail {
			color: @color-error;
		}
	}
}
</style>

MediaWiki

<template>
	<cdx-table
		v-model:selected-rows="selectedRows"
		class="cdx-docs-table-with-selection"
		caption="Tests"
		:columns="columns"
		:data="data"
		:use-row-selection="true"
	>
		<template #header>
			<div class="cdx-docs-table-with-selection__header-content">
				<span>
					{{ selectedRows.length }} items selected
				</span>
				<span class="cdx-docs-table-with-selection__header-content__buttons">
					<cdx-button @click="handleRerun">
						Rerun
					</cdx-button>
					<cdx-button @click="handleDisconnect">
						Disconnect
					</cdx-button>
				</span>
			</div>
		</template>

		<template #item-name="{ item }">
			<a :href="item.url">{{ item.label }}</a>
		</template>

		<template #item-status="{ item }">
			<cdx-info-chip :status="item ? 'success' : 'warning'">
				{{ item ? 'Connected' : 'Disconnected' }}
			</cdx-info-chip>
		</template>

		<template #item-result="{ item }">
			<cdx-icon
				:class="getIconClass( item )"
				:icon="item ? cdxIconCheck : cdxIconClose"
			></cdx-icon>
			{{ item ? 'Passed' : 'Failed' }}
		</template>
	</cdx-table>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxTable, CdxButton, CdxInfoChip, CdxIcon } = require( '@wikimedia/codex' );
const { cdxIconCheck, cdxIconClose } = require( './icons.json' );

module.exports = defineComponent( {
	name: 'TableWithSelection',
	components: { CdxTable, CdxButton, CdxInfoChip, CdxIcon },
	setup() {
		// eslint-disable-next-line jsdoc/valid-types
		/** @type {import('vue').Ref<number[]>} */
		const selectedRows = ref( [] );

		const columns = [
			{ id: 'name', label: 'Name', minWidth: '200px' },
			{ id: 'status', label: 'Status' },
			{ id: 'result', label: 'English verb to agent noun' }
		];

		const data = ref( [
			{
				name: {
					label: '"illustrate" -> "illustrator"',
					url: 'https://www.wikifunctions.org/view/en/Z11401'
				},
				status: true,
				result: false
			},
			{
				name: {
					label: '"listen" -> "listener"',
					url: 'https://www.wikifunctions.org/view/en/Z11405'
				},
				status: true,
				result: true
			},
			{
				name: {
					label: '"mentor" -> "mentor"',
					url: 'https://www.wikifunctions.org/view/en/Z11402'
				},
				status: true,
				result: true
			},
			{
				name: {
					label: '"swim" -> "swimmer"',
					url: 'https://www.wikifunctions.org/view/en/Z11404'
				},
				status: true,
				result: false
			}
		] );

		/**
		 * Rerun the test. In this simple example, this just changes any failing
		 * tests to passing.
		 */
		function handleRerun() {
			for ( const index of selectedRows.value ) {
				data.value[ index ].result = true;
			}
		}

		/**
		 * Disconnect selected tests.
		 */
		function handleDisconnect() {
			for ( const index of selectedRows.value ) {
				data.value[ index ].status = false;
			}
		}

		function getIconClass( result ) {
			const iconClassModifier = result ? 'pass' : 'fail';
			return {
				[ `cdx-docs-table-with-selection__icon--${ iconClassModifier }` ]: true
			};
		}

		return {
			selectedRows,
			columns,
			data,
			handleRerun,
			handleDisconnect,
			getIconClass,
			cdxIconCheck,
			cdxIconClose
		};
	}
} );
</script>

<style lang="less">
@import 'mediawiki.skin.variables.less';

.cdx-docs-table-with-selection {
	&__header-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: @spacing-50;

		&__buttons {
			display: flex;
			gap: @spacing-50;
		}
	}

	& &__icon {
		&--pass {
			color: @color-success;
		}

		&--fail {
			color: @color-error;
		}
	}
}
</style>

With selection and sort

To use both row selection and sorting, you must add a unique identifier to each row:

• Import the TableRowIdentifier constant from Codex
• Add a property to each row object keyed on TableRowIdentifier with a unique ID, e.g. [ TableRowIdentifier ]: 'Q123'

Tests

0 items selected

Tests , column headers with buttons are sortable.

Select all rows		Status	English verb to agent noun
Select row 1 of 4	"illustrate" -> "illustrator"	Connected	Failed
Select row 2 of 4	"listen" -> "listener"	Connected	Passed
Select row 3 of 4	"mentor" -> "mentor"	Connected	Passed
Select row 4 of 4	"swim" -> "swimmer"	Connected	Failed

NPM

<template>
	<cdx-table
		v-model:selected-rows="selectedRows"
		v-model:sort="sort"
		class="cdx-docs-table-with-selection"
		caption="Tests"
		:columns="columns"
		:data="data"
		:use-row-selection="true"
		@update:sort="onSort"
	>
		<template #header>
			<div class="cdx-docs-table-with-selection__header-content">
				<span>
					{{ selectedRows.length }} items selected
				</span>
				<span class="cdx-docs-table-with-selection__header-content__buttons">
					<cdx-button @click="handleRerun">
						Rerun
					</cdx-button>
					<cdx-button @click="handleDisconnect">
						Disconnect
					</cdx-button>
				</span>
			</div>
		</template>

		<template #item-name="{ item }">
			<a :href="item.url">{{ item.label }}</a>
		</template>

		<template #item-status="{ item }">
			<cdx-info-chip :status="item ? 'success' : 'warning'">
				{{ item ? 'Connected' : 'Disconnected' }}
			</cdx-info-chip>
		</template>

		<template #item-result="{ item }">
			<cdx-icon
				:class="getIconClass( item )"
				:icon="item ? cdxIconCheck : cdxIconClose"
			/>
			{{ item ? 'Passed' : 'Failed' }}
		</template>
	</cdx-table>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxTable, CdxButton, CdxInfoChip, CdxIcon, TableRowIdentifier } from '@wikimedia/codex';
import { cdxIconCheck, cdxIconClose } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'TableWithSelection',
	components: { CdxTable, CdxButton, CdxInfoChip, CdxIcon },
	setup() {
		// eslint-disable-next-line jsdoc/valid-types
		/** @type {import('vue').Ref<string[]>} */
		const selectedRows = ref( [] );

		const sort = ref( { name: 'asc' } );

		const columns = [
			{ id: 'name', label: 'Name', minWidth: '200px', allowSort: true },
			{ id: 'status', label: 'Status' },
			{ id: 'result', label: 'English verb to agent noun' }
		];

		const data = ref( [
			{
				[ TableRowIdentifier ]: 'Z11401',
				name: {
					label: '"illustrate" -> "illustrator"',
					url: 'https://www.wikifunctions.org/view/en/Z11401'
				},
				status: true,
				result: false
			},
			{
				[ TableRowIdentifier ]: 'Z11405',
				name: {
					label: '"listen" -> "listener"',
					url: 'https://www.wikifunctions.org/view/en/Z11405'
				},
				status: true,
				result: true
			},
			{
				[ TableRowIdentifier ]: 'Z11402',
				name: {
					label: '"mentor" -> "mentor"',
					url: 'https://www.wikifunctions.org/view/en/Z11402'
				},
				status: true,
				result: true
			},
			{
				[ TableRowIdentifier ]: 'Z11404',
				name: {
					label: '"swim" -> "swimmer"',
					url: 'https://www.wikifunctions.org/view/en/Z11404'
				},
				status: true,
				result: false
			}
		] );

		/**
		 * Rerun the test. In this simple example, this just changes any failing
		 * tests to passing.
		 */
		function handleRerun() {
			data.value.forEach( ( row, index ) => {
				if ( selectedRows.value.includes( row[ TableRowIdentifier ] ) ) {
					data.value[ index ].result = true;
				}
			} );
		}

		/**
		 * Disconnect selected tests.
		 */
		function handleDisconnect() {
			data.value.forEach( ( row, index ) => {
				if ( selectedRows.value.includes( row[ TableRowIdentifier ] ) ) {
					data.value[ index ].status = false;
				}
			} );
		}

		function onSort( newSort ) {
			const sortOrder = newSort.name;

			function sortAlphabetically( sortDir ) {
				data.value.sort( ( a, b ) => {
					const multiplier = sortDir === 'asc' ? 1 : -1;
					return multiplier * ( a.name.label.localeCompare( b.name.label ) );
				} );
			}

			// Reset default sort order.
			if ( sortOrder === 'none' ) {
				sortAlphabetically( 'asc' );
				sort.value = { name: 'asc' };
				return;
			}

			sortAlphabetically( sortOrder );
		}

		function getIconClass( result ) {
			const iconClassModifier = result ? 'pass' : 'fail';
			return {
				[ `cdx-docs-table-with-selection__icon--${ iconClassModifier }` ]: true
			};
		}

		return {
			selectedRows,
			sort,
			columns,
			data,
			handleRerun,
			handleDisconnect,
			onSort,
			getIconClass,
			cdxIconCheck,
			cdxIconClose
		};
	}
} );
</script>

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-docs-table-with-selection {
	&__header-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: @spacing-50;

		&__buttons {
			display: flex;
			gap: @spacing-50;
		}
	}

	& &__icon {
		&--pass {
			color: @color-success;
		}

		&--fail {
			color: @color-error;
		}
	}
}
</style>

MediaWiki

<template>
	<cdx-table
		v-model:selected-rows="selectedRows"
		v-model:sort="sort"
		class="cdx-docs-table-with-selection"
		caption="Tests"
		:columns="columns"
		:data="data"
		:use-row-selection="true"
		@update:sort="onSort"
	>
		<template #header>
			<div class="cdx-docs-table-with-selection__header-content">
				<span>
					{{ selectedRows.length }} items selected
				</span>
				<span class="cdx-docs-table-with-selection__header-content__buttons">
					<cdx-button @click="handleRerun">
						Rerun
					</cdx-button>
					<cdx-button @click="handleDisconnect">
						Disconnect
					</cdx-button>
				</span>
			</div>
		</template>

		<template #item-name="{ item }">
			<a :href="item.url">{{ item.label }}</a>
		</template>

		<template #item-status="{ item }">
			<cdx-info-chip :status="item ? 'success' : 'warning'">
				{{ item ? 'Connected' : 'Disconnected' }}
			</cdx-info-chip>
		</template>

		<template #item-result="{ item }">
			<cdx-icon
				:class="getIconClass( item )"
				:icon="item ? cdxIconCheck : cdxIconClose"
			></cdx-icon>
			{{ item ? 'Passed' : 'Failed' }}
		</template>
	</cdx-table>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxTable, CdxButton, CdxInfoChip, CdxIcon, TableRowIdentifier } = require( '@wikimedia/codex' );
const { cdxIconCheck, cdxIconClose } = require( './icons.json' );

module.exports = defineComponent( {
	name: 'TableWithSelection',
	components: { CdxTable, CdxButton, CdxInfoChip, CdxIcon },
	setup() {
		// eslint-disable-next-line jsdoc/valid-types
		/** @type {import('vue').Ref<string[]>} */
		const selectedRows = ref( [] );

		const sort = ref( { name: 'asc' } );

		const columns = [
			{ id: 'name', label: 'Name', minWidth: '200px', allowSort: true },
			{ id: 'status', label: 'Status' },
			{ id: 'result', label: 'English verb to agent noun' }
		];

		const data = ref( [
			{
				[ TableRowIdentifier ]: 'Z11401',
				name: {
					label: '"illustrate" -> "illustrator"',
					url: 'https://www.wikifunctions.org/view/en/Z11401'
				},
				status: true,
				result: false
			},
			{
				[ TableRowIdentifier ]: 'Z11405',
				name: {
					label: '"listen" -> "listener"',
					url: 'https://www.wikifunctions.org/view/en/Z11405'
				},
				status: true,
				result: true
			},
			{
				[ TableRowIdentifier ]: 'Z11402',
				name: {
					label: '"mentor" -> "mentor"',
					url: 'https://www.wikifunctions.org/view/en/Z11402'
				},
				status: true,
				result: true
			},
			{
				[ TableRowIdentifier ]: 'Z11404',
				name: {
					label: '"swim" -> "swimmer"',
					url: 'https://www.wikifunctions.org/view/en/Z11404'
				},
				status: true,
				result: false
			}
		] );

		/**
		 * Rerun the test. In this simple example, this just changes any failing
		 * tests to passing.
		 */
		function handleRerun() {
			data.value.forEach( ( row, index ) => {
				if ( selectedRows.value.includes( row[ TableRowIdentifier ] ) ) {
					data.value[ index ].result = true;
				}
			} );
		}

		/**
		 * Disconnect selected tests.
		 */
		function handleDisconnect() {
			data.value.forEach( ( row, index ) => {
				if ( selectedRows.value.includes( row[ TableRowIdentifier ] ) ) {
					data.value[ index ].status = false;
				}
			} );
		}

		function onSort( newSort ) {
			const sortOrder = newSort.name;

			function sortAlphabetically( sortDir ) {
				data.value.sort( ( a, b ) => {
					const multiplier = sortDir === 'asc' ? 1 : -1;
					return multiplier * ( a.name.label.localeCompare( b.name.label ) );
				} );
			}

			// Reset default sort order.
			if ( sortOrder === 'none' ) {
				sortAlphabetically( 'asc' );
				sort.value = { name: 'asc' };
				return;
			}

			sortAlphabetically( sortOrder );
		}

		function getIconClass( result ) {
			const iconClassModifier = result ? 'pass' : 'fail';
			return {
				[ `cdx-docs-table-with-selection__icon--${ iconClassModifier }` ]: true
			};
		}

		return {
			selectedRows,
			sort,
			columns,
			data,
			handleRerun,
			handleDisconnect,
			onSort,
			getIconClass,
			cdxIconCheck,
			cdxIconClose
		};
	}
} );
</script>

<style lang="less">
@import 'mediawiki.skin.variables.less';

.cdx-docs-table-with-selection {
	&__header-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: @spacing-50;

		&__buttons {
			display: flex;
			gap: @spacing-50;
		}
	}

	& &__icon {
		&--pass {
			color: @color-success;
		}

		&--fail {
			color: @color-error;
		}
	}
}
</style>

Empty state

An empty state message can be displayed via the empty-state slot. If the empty-state slot is populated, this slot will automatically display the slot content when there are no items in the data array and the tbody slot is not overridden.

Table Caption

Table Caption

There is no data available

<template v-slot:demo>
  <cdx-table caption="Table Caption">
    <template #empty-state> There is no data available </template>
  </cdx-table>
</template>

Vue usage

Props

Prop name	Description	Type	Default
caption(required)	Table caption. Required to support users of assistive technology, but can be visually hidden.	string
hideCaption	Whether to visually hide the caption.	boolean	false
columns	Column definitions.	TableColumn[]	() => []
data	Table data. An array of objects, with each object representing the data for a table row. Item keys should align with column IDs, as defined in the columns prop.	TableRow[]|TableRowWithIdentifier[]	() => []
useRowHeaders	Whether to use <th> for the first cell in each row.	boolean	false
showVerticalBorders	Whether vertical borders separating columns should be rendered.	boolean	false
useRowSelection	Whether to enable row selection.	boolean	false
selectedRows	An array of selected row indices. Must be bound with v-model:selected-rows. If sorting is also enabled, this will be an array of TableRowIdentifiers.	( number|string )[]	() => []
selectAllLabel	Label for the "select all rows" checkbox. This label is visually hidden but needed for assistive technology.	string	'Select all rows'
selectRowLabel	Label for the "select row" checkboxes. These labels are visually hidden but needed for assistive technology.	func	( x: number, y:number ) => Select row ${ x } of ${ y }
sort	Definition of sort order. Column(s) can be sorted ascending, descending, or not sorted. To display data unsorted initially, set to an empty object initially. Must be bound with v-model:sort	TableSort	() => ( {} )
sortCaption	Text that provides additional info for the <caption> element when the column header has sorting is enabled. This text is visually hidden but needed for assistive technology when sort is enabled.	string	', column headers with buttons are sortable.'

Events

Event name	Properties	Description
update:selectedRows	selectedRows string[] - The new selected rows.	When the selected row(s) changes.
update:sort	sort Object - The new sort order.	When the sort order changes emit an event to update the sort order.

Slots

Name	Description	Bindings
header	Header content. Not to be confused with <thead>; use the thead slot to customize that.
thead	Custom <thead>.
tbody	Custom <tbody>.
'item-' + column.id	Table cell content, per column.	item any - Data for the cell row TableRow, TableRowWithIdentifier - Data for the row
empty-state	Empty state content.
tfoot	Custom <tfoot>.
footer	Footer content. Not to be confused with <tfoot>; use the tfoot slot to add that.

CSS-only version

Markup structure

The CSS-only Table consists of a <table> element and its child elements, plus some wrapper elements and CSS classes needed to ensure proper styles and accessibility. See the code sample below for details.

Cell data is aligned to the start of the cell by default. You can use the following CSS classes to change the alignment of cell data:

• cdx-table__table__cell--align-center: Align content to the center of the cell
• cdx-table__table__cell--align-end: Align content to the end of the cell (to the right in LTR and to the left in RTL)
• cdx-table__table__cell--align-number: Align content to the right of the cell in both reading directionalities. This is recommended for columns that contain numerical values.

Note that all cells in a column, including the <th> in the <thead>, should have the same text alignment.

1912 Olympics — Men's marathon

1912 Olympics — Men's marathon

Athlete	Nation	Rank	Time
Ken McArthur	South Africa	1	2:36:54.8
Christian Gitsham	South Africa	2	2:37:52.0
Gaston Strobino	United States	3	2:38:42.4
Shizo Kanakuri	Japan	36	54:08:06:05:32:20.3

Read more on Wikipedia.

<!-- Wrapper div. -->
<div class="cdx-table">
  <!-- Header content. -->
  <div class="cdx-table__header">
    <!-- Visible table caption. It is hidden from assistive technology since
		there is an accessible <caption> in the <table> element. If you add
		content to the header content div below, remove `aria-hidden` here to
		ensure the caption is announced first. -->
    <div class="cdx-table__header__caption" aria-hidden="true">
      1912 Olympics — Men's marathon
    </div>
    <!-- Additional header content goes here if needed. -->
    <div class="cdx-table__header__header-content"></div>
  </div>
  <!-- Wrapper around the table element. Needed for horizontal scroll. -->
  <div class="cdx-table__table-wrapper">
    <!-- Table element. -->
    <table class="cdx-table__table">
      <!-- Visually-hidden caption element, for assistive technology.
				Do not omit this! -->
      <caption>
        1912 Olympics — Men's marathon
      </caption>
      <thead>
        <tr>
          <th scope="col">
            <span class="cdx-table__th-content">Athlete</span>
          </th>
          <th scope="col">
            <span class="cdx-table__th-content">Nation</span>
          </th>
          <!-- <th> with class to align cell content to the end. -->
          <th scope="col" class="cdx-table__table__cell--align-number">
            <span class="cdx-table__th-content">Rank</span>
          </th>
          <th scope="col" class="cdx-table__table__cell--align-number">
            <span class="cdx-table__th-content">Time</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ken McArthur</td>
          <td>South Africa</td>
          <!-- <th> with class to align cell content to the end. -->
          <td class="cdx-table__table__cell--align-number">1</td>
          <td class="cdx-table__table__cell--align-number">2:36:54.8</td>
        </tr>
        <tr>
          <td>Christian Gitsham</td>
          <td>South Africa</td>
          <td class="cdx-table__table__cell--align-number">2</td>
          <td class="cdx-table__table__cell--align-number">2:37:52.0</td>
        </tr>
        <tr>
          <td>Gaston Strobino</td>
          <td>United States</td>
          <td class="cdx-table__table__cell--align-number">3</td>
          <td class="cdx-table__table__cell--align-number">2:38:42.4</td>
        </tr>
        <tr>
          <td>Shizo Kanakuri</td>
          <td>Japan</td>
          <td class="cdx-table__table__cell--align-number">36</td>
          <td class="cdx-table__table__cell--align-number">
            54:08:06:05:32:20.3
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Visually hidden caption

To visually hide the header's caption, simply do not add it to the header element (<div class="cdx-table__header">). If you have no other header content, the entire header element can be removed, as in the example below. Make sure to always include the <caption> element inside the <table>, which is visually hidden by default.

List of MediaWikis

Project	No. of wikis	Active users	All users
wikipedias	342	292249	113556337
wiktionaries	193	5764	7275027
wikiquotes	96	2042	4261041
Total:	631	300055	125092405

<div class="cdx-table">
  <!-- Header has been omitted since there is no header content. -->
  <div class="cdx-table__table-wrapper">
    <table class="cdx-table__table">
      <caption>
        List of MediaWikis
      </caption>
      <thead>
        <tr>
          <th scope="col">Project</th>
          <th scope="col" class="cdx-table__table__cell--align-number">
            No. of wikis
          </th>
          <th scope="col" class="cdx-table__table__cell--align-number">
            Active users
          </th>
          <th scope="col" class="cdx-table__table__cell--align-number">
            All users
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>wikipedias</td>
          <td class="cdx-table__table__cell--align-number">342</td>
          <td class="cdx-table__table__cell--align-number">292249</td>
          <td class="cdx-table__table__cell--align-number">113556337</td>
        </tr>
        <tr>
          <td>wiktionaries</td>
          <td class="cdx-table__table__cell--align-number">193</td>
          <td class="cdx-table__table__cell--align-number">5764</td>
          <td class="cdx-table__table__cell--align-number">7275027</td>
        </tr>
        <tr>
          <td>wikiquotes</td>
          <td class="cdx-table__table__cell--align-number">96</td>
          <td class="cdx-table__table__cell--align-number">2042</td>
          <td class="cdx-table__table__cell--align-number">4261041</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total:</td>
          <td class="cdx-table__table__cell--align-number">631</td>
          <td class="cdx-table__table__cell--align-number">300055</td>
          <td class="cdx-table__table__cell--align-number">125092405</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Vertical borders

To display vertical borders that separate the columns, apply the cdx-table__table--borders-vertical class to table element. This class may not cover all use cases, therefore apply additional border styles to the element as needed.

List of MediaWikis

List of MediaWikis

Project	No. of wikis	Users
		Active	All
wikipedias	342	292249	113556337
wiktionaries	193	5764	7275027
wikiquotes	96	2042	4261041
Total:	631	300055	125092405

<div class="cdx-table">
  <div class="cdx-table__header">
    <div class="cdx-table__header__caption" aria-hidden="true">
      List of MediaWikis
    </div>
  </div>
  <div class="cdx-table__table-wrapper">
    <!-- <table> with the class to add vertical borders/rulers to separate the columns. -->
    <table class="cdx-table__table cdx-table__table--borders-vertical">
      <caption>
        List of MediaWikis
      </caption>
      <thead>
        <tr>
          <th scope="col" rowspan="2">Project</th>
          <th
            scope="col"
            rowspan="2"
            class="cdx-table__table__cell--align-number"
          >
            No. of wikis
          </th>
          <th
            scope="colgroup"
            colspan="2"
            class="cdx-table__table__cell--align-center"
          >
            Users
          </th>
        </tr>
        <tr>
          <th scope="col" class="cdx-table__table__cell--align-number">
            Active
          </th>
          <th scope="col" class="cdx-table__table__cell--align-number">All</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>wikipedias</td>
          <td class="cdx-table__table__cell--align-number">342</td>
          <td class="cdx-table__table__cell--align-number">292249</td>
          <td class="cdx-table__table__cell--align-number">113556337</td>
        </tr>
        <tr>
          <td>wiktionaries</td>
          <td class="cdx-table__table__cell--align-number">193</td>
          <td class="cdx-table__table__cell--align-number">5764</td>
          <td class="cdx-table__table__cell--align-number">7275027</td>
        </tr>
        <tr>
          <td>wikiquotes</td>
          <td class="cdx-table__table__cell--align-number">96</td>
          <td class="cdx-table__table__cell--align-number">2042</td>
          <td class="cdx-table__table__cell--align-number">4261041</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <!-- <th> as a row header cell with the scope attribute. -->
          <th scope="row">Total:</th>
          <td class="cdx-table__table__cell--align-number">631</td>
          <td class="cdx-table__table__cell--align-number">300055</td>
          <td class="cdx-table__table__cell--align-number">125092405</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Row headers

In some cases, header information can be found in the top row and first column. All header cells are marked up as th elements with the appropriate scope attribute. The scope attribute helps to describe the relationship between header and data cells. Refer to WAI to learn more about Table header row and header column.

List of MediaWikis

List of MediaWikis

Project	No. of wikis	Users
		Active	All
wikipedias	342	292249	113556337
wiktionaries	193	5764	7275027
wikiquotes	96	2042	4261041
Total:	631	300055	125092405

<div class="cdx-table">
  <div class="cdx-table__header">
    <div class="cdx-table__header__caption" aria-hidden="true">
      List of MediaWikis
    </div>
  </div>
  <div class="cdx-table__table-wrapper">
    <table class="cdx-table__table cdx-table__table--borders-vertical">
      <caption>
        List of MediaWikis
      </caption>
      <thead>
        <tr>
          <th scope="col" rowspan="2">Project</th>
          <th
            scope="col"
            rowspan="2"
            class="cdx-table__table__cell--align-number"
          >
            No. of wikis
          </th>
          <th
            scope="colgroup"
            colspan="2"
            class="cdx-table__table__cell--align-center"
          >
            Users
          </th>
        </tr>
        <tr>
          <th scope="col" class="cdx-table__table__cell--align-number">
            Active
          </th>
          <th scope="col" class="cdx-table__table__cell--align-number">All</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <!-- <th> as a row header cell with the scope attribute. -->
          <th scope="row">wikipedias</th>
          <td class="cdx-table__table__cell--align-number">342</td>
          <td class="cdx-table__table__cell--align-number">292249</td>
          <td class="cdx-table__table__cell--align-number">113556337</td>
        </tr>
        <tr>
          <!-- <th> as a row header cell with the scope attribute. -->
          <th scope="row">wiktionaries</th>
          <td class="cdx-table__table__cell--align-number">193</td>
          <td class="cdx-table__table__cell--align-number">5764</td>
          <td class="cdx-table__table__cell--align-number">7275027</td>
        </tr>
        <tr>
          <!-- <th> as a row header cell with the scope attribute. -->
          <th scope="row">wikiquotes</th>
          <td class="cdx-table__table__cell--align-number">96</td>
          <td class="cdx-table__table__cell--align-number">2042</td>
          <td class="cdx-table__table__cell--align-number">4261041</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <!-- <th> as a row header cell with the scope attribute. -->
          <th scope="row">Total:</th>
          <td class="cdx-table__table__cell--align-number">631</td>
          <td class="cdx-table__table__cell--align-number">300055</td>
          <td class="cdx-table__table__cell--align-number">125092405</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

With row selection

Row selection can be done without JavaScript by following these steps:

• Use a <form> element as the outermost element with the class cdx-table
• Add a submit button to the header to handle the row selection data
• Omit the "select all" checkbox in the <thead>
• Give each row's checkbox the same name and a unique value

Note that the Table below doesn't actually do anything when you click "Sign up" besides submit the form and reload the page.

Sessions

Tests

	Name	Time
Select row 1 of 3	Introduction to Semantic MediaWiki	11:00 EEST
Select row 2 of 3	Wikisource intro session	11:30 EEST
Select row 3 of 3	Introduction to Wikibase Suite	12:00 EEST

<!-- Use a <form> element instead of a <div>. -->
<form class="cdx-table" action="">
  <div class="cdx-table__header">
    <!-- When there is header content (e.g. this "Sign up" button), do
		not use `aria-hidden` on the visible caption. This way, the caption
		will be announced before the header content. -->
    <div class="cdx-table__header__caption">Sessions</div>
    <div class="cdx-table__header__header-content">
      <!-- Include a submit button. -->
      <button class="cdx-button" type="submit">Sign up</button>
    </div>
  </div>
  <div class="cdx-table__table-wrapper">
    <table class="cdx-table__table">
      <caption>
        Tests
      </caption>
      <thead>
        <tr>
          <!-- Empty <th> since we are omitting the "select all" option. -->
          <th></th>
          <th scope="col">Name</th>
          <th scope="col">Time</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="cdx-checkbox">
              <!-- Include the proper attributes on each checkbox input. -->
              <input
                id="session-1"
                class="cdx-checkbox__input"
                type="checkbox"
                name="sessions"
                value="session-1"
              />
              <span class="cdx-checkbox__icon"></span>
              <div
                class="cdx-label cdx-label--visually-hidden cdx-checkbox__label"
              >
                <label class="cdx-label__label" for="session-1">
                  <span class="cdx-label__label__text">Select row 1 of 3</span>
                </label>
              </div>
            </span>
          </td>
          <td>Introduction to Semantic MediaWiki</td>
          <td>11:00 EEST</td>
        </tr>
        <tr>
          <td>
            <span class="cdx-checkbox">
              <input
                id="session-2"
                class="cdx-checkbox__input"
                type="checkbox"
                name="sessions"
                value="session-2"
              />
              <span class="cdx-checkbox__icon"></span>
              <div
                class="cdx-label cdx-label--visually-hidden cdx-checkbox__label"
              >
                <label class="cdx-label__label" for="session-2">
                  <span class="cdx-label__label__text">Select row 2 of 3</span>
                </label>
              </div>
            </span>
          </td>
          <td>Wikisource intro session</td>
          <td>11:30 EEST</td>
        </tr>
        <tr>
          <td>
            <span class="cdx-checkbox">
              <input
                id="session-3"
                class="cdx-checkbox__input"
                type="checkbox"
                name="sessions"
                value="session-3"
              />
              <span class="cdx-checkbox__icon"></span>
              <div
                class="cdx-label cdx-label--visually-hidden cdx-checkbox__label"
              >
                <label class="cdx-label__label" for="session-3">
                  <span class="cdx-label__label__text">Select row 3 of 3</span>
                </label>
              </div>
            </span>
          </td>
          <td>Introduction to Wikibase Suite</td>
          <td>12:00 EEST</td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Empty state

You can use the CSS classes, cdx-table__table__empty-state and cdx-table__table__empty-state-content, to style the empty state message that indicates that there's no data available.

List of MediaWikis

List of MediaWikis

There is no data available

<div class="cdx-table">
  <div class="cdx-table__header">
    <div class="cdx-table__header__caption" aria-hidden="true">
      List of MediaWikis
    </div>
  </div>
  <div class="cdx-table__table-wrapper">
    <table class="cdx-table__table">
      <caption>
        List of MediaWikis
      </caption>
      <!-- <tbody> with the class for an empty table that has no data available. -->
      <tbody>
        <tr class="cdx-table__table__empty-state">
          <td class="cdx-table__table__empty-state-content">
            There is no data available
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>