Table

WARNING

This component is still under development. It is not yet available in releases of Codex.

Demos

Default

Default table
Column 1	Column 2	Column 3
One	Two	Three
1	2	3
Four	Five	Six
4	5	6

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Exploring content and width options

With set column widths

In this demo, the second column is set to be wider than the first and third columns. You can set column widths to a percentage or specific value if table-layout: fixed is used.

This is done via CSS in the parent component here. However, we might consider building this into the columns prop for additional ease.

Table with set column widths
Column 1	Column 2	Column 3
One	Two	Three
1	2	3
Four	Five	Six
4	5	6

NPMMediaWiki

vue

<template>
	<cdx-table
		class="cdx-demo-table-set-col-widths"
		caption="Table with set column widths"
		:columns="columns"
		:data="data"
	/>
</template>

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

export default defineComponent( {
	name: 'TableWithSetColWidths',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'col1', label: 'Column 1' },
			{ id: 'col2', label: 'Column 2' },
			{ id: 'col3', label: 'Column 3' }
		];

		const data = [
			{ col1: 'One', col2: 'Two', col3: 'Three' },
			{ col1: 1, col2: 2, col3: 3 },
			{ col1: 'Four', col2: 'Five', col3: 'Six' },
			{ col1: 4, col2: 5, col3: 6 }
		];

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

<style lang="less">
/* stylelint-disable scale-unlimited/declaration-strict-value */
.cdx-demo-table-set-col-widths {
	table {
		table-layout: fixed;
	}

	th:nth-child( 1 ),
	th:nth-child( 3 ) {
		width: 20%;
	}

	th:nth-child( 2 ) {
		width: 60%;
	}
}
/* stylelint-enable scale-unlimited/declaration-strict-value */
</style>

vue

<template>
	<cdx-table
		class="cdx-demo-table-set-col-widths"
		caption="Table with set column widths"
		:columns="columns"
		:data="data"
	></cdx-table>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'TableWithSetColWidths',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'col1', label: 'Column 1' },
			{ id: 'col2', label: 'Column 2' },
			{ id: 'col3', label: 'Column 3' }
		];

		const data = [
			{ col1: 'One', col2: 'Two', col3: 'Three' },
			{ col1: 1, col2: 2, col3: 3 },
			{ col1: 'Four', col2: 'Five', col3: 'Six' },
			{ col1: 4, col2: 5, col3: 6 }
		];

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

<style lang="less">
/* stylelint-disable scale-unlimited/declaration-strict-value */
.cdx-demo-table-set-col-widths {
	table {
		table-layout: fixed;
	}

	th:nth-child( 1 ),
	th:nth-child( 3 ) {
		width: 20%;
	}

	th:nth-child( 2 ) {
		width: 60%;
	}
}
/* stylelint-enable scale-unlimited/declaration-strict-value */
</style>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With varied content length

In this table, the third column's content is much longer than the other two. The column widths are naturally set accordingly. However, when you look at the table on a mobile device, the third column will be uncomfortably narrow. This could be fixed by adding a min width as demonstrated below.

Table with varied content length
User	IP(s)	User Agent(s)
Abc	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Twoword Username	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Shortish	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
123.45.6.789	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Short	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
PascalCase	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With many columns

This table has a lot of columns, including two with long content. Horizontal scrolling occurs since the natural state of this table is wider than the container.

Table with many columns
User	IP(s)	User Agent(s)	User 2	IP(s) 2	User Agent(s) 2
Abc	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Abc	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Twoword Username	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Twoword Username	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Shortish	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Shortish	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
123.45.6.789	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	123.45.6.789	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Short	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Short	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
PascalCase	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	PascalCase	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]

NPMMediaWiki

vue

<template>
	<cdx-table
		caption="Table with many columns"
		:columns="columns"
		:data="data"
	/>
</template>

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

export default defineComponent( {
	name: 'TableWithManyColumns',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'user', label: 'User' },
			{ id: 'ip', label: 'IP(s)' },
			{ id: 'userAgent', label: 'User Agent(s)' },
			{ id: 'user2', label: 'User 2' },
			{ id: 'ip2', label: 'IP(s) 2' },
			{ id: 'userAgent2', label: 'User Agent(s) 2' }
		];

		const ids = [
			'Abc',
			'Twoword Username',
			'Shortish',
			'123.45.6.789',
			'Short',
			'PascalCase'
		];
		const ip = '123.45.6.789';
		const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]';
		const data = [
			{ id: ids[ 0 ], ip, userAgent, id2: ids[ 0 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 1 ], ip, userAgent, id2: ids[ 1 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 2 ], ip, userAgent, id2: ids[ 2 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 3 ], ip, userAgent, id2: ids[ 3 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 4 ], ip, userAgent, id2: ids[ 4 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 5 ], ip, userAgent, id2: ids[ 5 ], ip2: ip, userAgent2: userAgent }
		];

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

vue

<template>
	<cdx-table
		caption="Table with many columns"
		:columns="columns"
		:data="data"
	></cdx-table>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'TableWithManyColumns',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'user', label: 'User' },
			{ id: 'ip', label: 'IP(s)' },
			{ id: 'userAgent', label: 'User Agent(s)' },
			{ id: 'user2', label: 'User 2' },
			{ id: 'ip2', label: 'IP(s) 2' },
			{ id: 'userAgent2', label: 'User Agent(s) 2' }
		];

		const ids = [
			'Abc',
			'Twoword Username',
			'Shortish',
			'123.45.6.789',
			'Short',
			'PascalCase'
		];
		const ip = '123.45.6.789';
		const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]';
		const data = [
			{ id: ids[ 0 ], ip, userAgent, id2: ids[ 0 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 1 ], ip, userAgent, id2: ids[ 1 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 2 ], ip, userAgent, id2: ids[ 2 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 3 ], ip, userAgent, id2: ids[ 3 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 4 ], ip, userAgent, id2: ids[ 4 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 5 ], ip, userAgent, id2: ids[ 5 ], ip2: ip, userAgent2: userAgent }
		];

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

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With many columns and column min-widths

This is the same table as above, but a min-width is set on the two columns with longer content to make it more readable.

Table with many columns, improved
User	IP(s)	User Agent(s)	User 2	IP(s) 2	User Agent(s) 2
Abc	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Abc	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Twoword Username	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Twoword Username	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Shortish	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Shortish	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
123.45.6.789	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	123.45.6.789	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
Short	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	Short	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]
PascalCase	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]	PascalCase	123.45.6.789	Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]

NPMMediaWiki

vue

<template>
	<cdx-table
		class="cdx-demo-table-many-columns-improved"
		caption="Table with many columns, improved"
		:columns="columns"
		:data="data"
	/>
</template>

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

export default defineComponent( {
	name: 'TableWithManyColumnsImproved',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'user', label: 'User' },
			{ id: 'ip', label: 'IP(s)' },
			{ id: 'userAgent', label: 'User Agent(s)' },
			{ id: 'user2', label: 'User 2' },
			{ id: 'ip2', label: 'IP(s) 2' },
			{ id: 'userAgent2', label: 'User Agent(s) 2' }
		];

		const ids = [ 'Abc', 'Twoword Username', 'Shortish', '123.45.6.789', 'Short', 'PascalCase' ];
		const ip = '123.45.6.789';
		const userAgent =
			'Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]';
		const data = [
			{ id: ids[ 0 ], ip, userAgent, id2: ids[ 0 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 1 ], ip, userAgent, id2: ids[ 1 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 2 ], ip, userAgent, id2: ids[ 2 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 3 ], ip, userAgent, id2: ids[ 3 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 4 ], ip, userAgent, id2: ids[ 4 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 5 ], ip, userAgent, id2: ids[ 5 ], ip2: ip, userAgent2: userAgent }
		];

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

<style lang="less">
/* stylelint-disable scale-unlimited/declaration-strict-value */
.cdx-demo-table-many-columns-improved {
	table {
		table-layout: fixed;
	}

	th:nth-child( 3 ),
	th:nth-child( 6 ) {
		min-width: 300px;
	}
}
/* stylelint-enable scale-unlimited/declaration-strict-value */
</style>

vue

<template>
	<cdx-table
		class="cdx-demo-table-many-columns-improved"
		caption="Table with many columns, improved"
		:columns="columns"
		:data="data"
	></cdx-table>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'TableWithManyColumnsImproved',
	components: { CdxTable },
	setup() {
		const columns = [
			{ id: 'user', label: 'User' },
			{ id: 'ip', label: 'IP(s)' },
			{ id: 'userAgent', label: 'User Agent(s)' },
			{ id: 'user2', label: 'User 2' },
			{ id: 'ip2', label: 'IP(s) 2' },
			{ id: 'userAgent2', label: 'User Agent(s) 2' }
		];

		const ids = [ 'Abc', 'Twoword Username', 'Shortish', '123.45.6.789', 'Short', 'PascalCase' ];
		const ip = '123.45.6.789';
		const userAgent =
			'Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]';
		const data = [
			{ id: ids[ 0 ], ip, userAgent, id2: ids[ 0 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 1 ], ip, userAgent, id2: ids[ 1 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 2 ], ip, userAgent, id2: ids[ 2 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 3 ], ip, userAgent, id2: ids[ 3 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 4 ], ip, userAgent, id2: ids[ 4 ], ip2: ip, userAgent2: userAgent },
			{ id: ids[ 5 ], ip, userAgent, id2: ids[ 5 ], ip2: ip, userAgent2: userAgent }
		];

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

<style lang="less">
/* stylelint-disable scale-unlimited/declaration-strict-value */
.cdx-demo-table-many-columns-improved {
	table {
		table-layout: fixed;
	}

	th:nth-child( 3 ),
	th:nth-child( 6 ) {
		min-width: 300px;
	}
}
/* stylelint-enable scale-unlimited/declaration-strict-value */
</style>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Customizing content with slots

Customizing cells

You can customize cell content by using dynamically generated slots for each column. The name of a column's slot follows the format item-[COLUMN_ID]. For example, in the table below, the slot to customize the "Name" column, which has an id of name, is item-name. You can put markup or even components inside these slots.

Table using item slots
Name	Status	Language
JavaScript modulo 2	Connected	javascript
Composite modulo 2	Connected	Composition
number is even, python	Disconnected	python

NPMMediaWiki

vue

<template>
	<cdx-table
		caption="Table using item slots"
		:columns="columns"
		:data="data"
	>
		<template #item-name="{ item }">
			<a :href="item.url">{{ item.label }}</a>
		</template>
		<template #item-status="{ item }">
			<cdx-info-chip :status="getChipStatus( item )">
				{{ item }}
			</cdx-info-chip>
		</template>
	</cdx-table>
</template>

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

export default defineComponent( {
	name: 'TableUsingItemSlots',
	components: { CdxTable, CdxInfoChip },
	setup() {
		const columns = [
			{ id: 'name', label: 'Name' },
			{ id: 'status', label: 'Status' },
			{ id: 'language', label: 'Language' }
		];

		const data = [
			{
				name: {
					label: 'JavaScript modulo 2',
					url: 'https://www.wikifunctions.org/view/en/Z12483'
				},
				status: 'Connected',
				language: 'javascript'
			},
			{
				name: {
					label: 'Composite modulo 2',
					url: 'https://www.wikifunctions.org/view/en/Z12486'
				},
				status: 'Connected',
				language: 'Composition'
			},
			{
				name: {
					label: 'number is even, python',
					url: 'https://www.wikifunctions.org/view/en/Z12694'
				},
				status: 'Disconnected',
				language: 'python'
			}
		];

		function getChipStatus( itemStatus ) {
			switch ( itemStatus ) {
				case 'Connected':
					return 'success';
				case 'Disconnected':
					return 'warning';
				default:
					return 'notice';
			}
		}

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

vue

<template>
	<cdx-table
		caption="Table using item slots"
		:columns="columns"
		:data="data"
	>
		<template #item-name="{ item }">
			<a :href="item.url">{{ item.label }}</a>
		</template>
		<template #item-status="{ item }">
			<cdx-info-chip :status="getChipStatus( item )">
				{{ item }}
			</cdx-info-chip>
		</template>
	</cdx-table>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'TableUsingItemSlots',
	components: { CdxTable, CdxInfoChip },
	setup() {
		const columns = [
			{ id: 'name', label: 'Name' },
			{ id: 'status', label: 'Status' },
			{ id: 'language', label: 'Language' }
		];

		const data = [
			{
				name: {
					label: 'JavaScript modulo 2',
					url: 'https://www.wikifunctions.org/view/en/Z12483'
				},
				status: 'Connected',
				language: 'javascript'
			},
			{
				name: {
					label: 'Composite modulo 2',
					url: 'https://www.wikifunctions.org/view/en/Z12486'
				},
				status: 'Connected',
				language: 'Composition'
			},
			{
				name: {
					label: 'number is even, python',
					url: 'https://www.wikifunctions.org/view/en/Z12694'
				},
				status: 'Disconnected',
				language: 'python'
			}
		];

		function getChipStatus( itemStatus ) {
			switch ( itemStatus ) {
				case 'Connected':
					return 'success';
				case 'Disconnected':
					return 'warning';
				default:
					return 'notice';
			}
		}

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

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Customizing the table body

Instead of passing table data in via the data prop, you can use the default slot of the Table component to customize the table body, while continuing to use the columns prop to pass in column information. This is useful when you want custom formatting or structure in the table body, but still want to take advantage of features built into the Table component's header, like sorting.

Table using the default slot and columns prop
Column 1	Column 2	Column 3
First section
One	Two	Three
1	2	3
Second section
Four	Five	Six
4	5	6

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Customizing all table content

Instead of passing data and column information in via props, you can use the default slot of the Table component to build your own table structure with all valid table elements. This can be useful for customizing table structure, like adding cells that span multiple rows or columns.

Table using the default slot
Season/series	Doctor	Episodes	Originally aired		Average viewers (millions)
Season/series	Doctor	Episodes	First aired	Last aired	Average viewers (millions)
Classic era
Season 1	First Doctor	42	23 November 1963	12 September 1964	8.08
Season 2		39	31 October 1964	24 July 1965	10.46
Season 3		45	11 September 1965	16 July 1966	7.65
Season 4	Second Doctor	43	10 September 1966	1 July 1967	7.1
Season 5		40	2 September 1967	1 June 1968	7.23
Season 6		45	10 August 1968	21 June 1969	6.38

NPMMediaWiki

vue

<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template>
	<cdx-table class="cdx-demo-table-default-slot" caption="Table using the default slot">
		<thead>
			<tr>
				<th rowspan="2">Season/series</th>
				<th rowspan="2">Doctor</th>
				<th rowspan="2">Episodes</th>
				<th rowspan="1" colspan="2">Originally aired</th>
				<th rowspan="2">Average viewers (millions)</th>
			</tr>
			<tr>
				<th>First aired</th>
				<th>Last aired</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="cdx-demo-table-default-slot__era" colspan="6">Classic era</td>
			</tr>
			<template v-for="( doctor, key ) in data" :key="key">
				<tr v-for="( season, index ) in doctor" :key="key + index">
					<td>{{ season.season }}</td>
					<td v-if="season.doctor" :rowspan="doctor.length">{{ season.doctor }}</td>
					<td>{{ season.episodes }}</td>
					<td>{{ season.airStart }}</td>
					<td>{{ season.airEnd }}</td>
					<td>{{ season.viewers }}</td>
				</tr>
			</template>
		</tbody>
	</cdx-table>
</template>

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

export default defineComponent( {
	name: 'TableDefault',
	components: { CdxTable },
	setup() {
		const data = {
			firstDoctor: [
				{
					season: 'Season 1',
					doctor: 'First Doctor',
					episodes: 42,
					airStart: '23 November 1963',
					airEnd: '12 September 1964',
					viewers: 8.08
				},
				{
					season: 'Season 2',
					episodes: 39,
					airStart: '31 October 1964',
					airEnd: '24 July 1965',
					viewers: 10.46
				},
				{
					season: 'Season 3',
					episodes: 45,
					airStart: '11 September 1965',
					airEnd: '16 July 1966',
					viewers: 7.65
				}
			],
			secondDoctor: [
				{
					season: 'Season 4',
					doctor: 'Second Doctor',
					episodes: 43,
					airStart: '10 September 1966',
					airEnd: '1 July 1967',
					viewers: 7.1
				},
				{
					season: 'Season 5',
					episodes: 40,
					airStart: '2 September 1967',
					airEnd: '1 June 1968',
					viewers: 7.23
				},
				{
					season: 'Season 6',
					episodes: 45,
					airStart: '10 August 1968',
					airEnd: '21 June 1969',
					viewers: 6.38
				}
			]
		};

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

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

.cdx-demo-table-default-slot {
	th[ colspan='2' ] {
		text-align: center;
	}

	&__era {
		background-color: @background-color-notice-subtle;
		font-weight: @font-weight-bold;
		text-align: center;
	}
}
</style>

vue

<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template>
	<cdx-table class="cdx-demo-table-default-slot" caption="Table using the default slot">
		<thead>
			<tr>
				<th rowspan="2">Season/series</th>
				<th rowspan="2">Doctor</th>
				<th rowspan="2">Episodes</th>
				<th rowspan="1" colspan="2">Originally aired</th>
				<th rowspan="2">Average viewers (millions)</th>
			</tr>
			<tr>
				<th>First aired</th>
				<th>Last aired</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="cdx-demo-table-default-slot__era" colspan="6">Classic era</td>
			</tr>
			<template v-for="( doctor, key ) in data" :key="key">
				<tr v-for="( season, index ) in doctor" :key="key + index">
					<td>{{ season.season }}</td>
					<td v-if="season.doctor" :rowspan="doctor.length">{{ season.doctor }}</td>
					<td>{{ season.episodes }}</td>
					<td>{{ season.airStart }}</td>
					<td>{{ season.airEnd }}</td>
					<td>{{ season.viewers }}</td>
				</tr>
			</template>
		</tbody>
	</cdx-table>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'TableDefault',
	components: { CdxTable },
	setup() {
		const data = {
			firstDoctor: [
				{
					season: 'Season 1',
					doctor: 'First Doctor',
					episodes: 42,
					airStart: '23 November 1963',
					airEnd: '12 September 1964',
					viewers: 8.08
				},
				{
					season: 'Season 2',
					episodes: 39,
					airStart: '31 October 1964',
					airEnd: '24 July 1965',
					viewers: 10.46
				},
				{
					season: 'Season 3',
					episodes: 45,
					airStart: '11 September 1965',
					airEnd: '16 July 1966',
					viewers: 7.65
				}
			],
			secondDoctor: [
				{
					season: 'Season 4',
					doctor: 'Second Doctor',
					episodes: 43,
					airStart: '10 September 1966',
					airEnd: '1 July 1967',
					viewers: 7.1
				},
				{
					season: 'Season 5',
					episodes: 40,
					airStart: '2 September 1967',
					airEnd: '1 June 1968',
					viewers: 7.23
				},
				{
					season: 'Season 6',
					episodes: 45,
					airStart: '10 August 1968',
					airEnd: '21 June 1969',
					viewers: 6.38
				}
			]
		};

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

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

.cdx-demo-table-default-slot {
	th[ colspan='2' ] {
		text-align: center;
	}

	&__era {
		background-color: @background-color-notice-subtle;
		font-weight: @font-weight-bold;
		text-align: center;
	}
}
</style>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Vue usage

Props

Prop name	Description	Type	Default
`caption`^(required)	Table caption. TODO: add prop to make this visually-hidden	`string`
`columns`		`TableColumn[]`	`() => { return []; }`
`data`		`array`	`[]`

Slots

Name	Description	Bindings
'item-' + columnId	Table cell content, per column.	item `mixed` - Data for the cell
default	Custom thead, tbody, and tfoot.

Table ​

Demos ​

Default ​

Exploring content and width options ​

With set column widths ​

With varied content length ​

With many columns ​

With many columns and column min-widths ​

Customizing content with slots ​

Customizing cells ​

Customizing the table body ​

Customizing all table content ​

Vue usage ​

Props ​

Slots ​

Table

Demos

Default

Exploring content and width options

With set column widths

With varied content length

With many columns

With many columns and column min-widths

Customizing content with slots

Customizing cells

Customizing the table body

Customizing all table content

Vue usage

Props

Slots