DisplayTable

Simple

A simple example.

An example of values are { EC: 6, course: 'Linear Algebra', id: 0, program: 'mathematics', useless: 'useless' }.

The download buttun downloads the table as an Excel file. Code is in util/excelDownloader.ts.

Initial order is as they appear in provided values.

One also has to provide a controller object and setController function. These control things like ordering, pagination, and filtering. These can be obtained by using the useController hook, or the useResource or useSave data hooks.

Live Editor

function SimpleTable() {
	const values = keyBy(
		[
			{
				id: 0,
				course: "Linear Algebra",
				program: "mathematics",
				EC: "6",
			},
			{
				id: 1,
				course: "Type Theory",
				program: "computing science",
				EC: "6",
			},
			{
				id: 2,
				course: "Category Theory",
				program: "computing science",
				EC: "6",
			},
		],
		"id"
	);
	const controller = useListController();

	return (
		<DisplayTable
			title="Title"
			values={values}
			columnLabels={{
				course: "Module",
				program: "Studie",
				EC: "EC",
			}}
			controller={controller}
			DisplayComponent={AnyField}
		/>
	);
}

Result

Loading...

Grouped

Table grouped on, in this example, predefined value groupValue: "program".

Live Editor

function SimpleTable() {
	const values = keyBy(
		[
			{
				id: 0,
				course: "Linear Algebra",
				program: "mathematics",
				EC: "6",
			},
			{
				id: 1,
				course: "Type Theory",
				program: "computing science",
				EC: "6",
			},
			{
				id: 2,
				course: "Category Theory",
				program: "computing science",
				EC: "6",
			},
		],
		"id"
	);
	controller = useListController();

	return (
		<DisplayTable
			title="Grouped Table"
			groupValue="program"
			values={values}
			columnLabels={{
				course: "Module",
				program: "Studie",
				EC: "EC",
			}}
			controller={controller}
			DisplayComponent={AnyField}
		/>
	);
}

Result

Loading...

Actions

A table with actions. There are 4 places for actions:

• RowActions: Appear next to a row when hovering over it.
• HeaderActions: Next to the column labels on each group's header.
• ToolbarActions: Between the search bar and download button on the toolbar.
• GroupActions: Next to the group title.

Live Editor

function ActionTable() {
	const values = keyBy(
		[
			{
				id: 0,
				course: "Linear Algebra",
				program: "mathematics",
				EC: "6",
			},
			{
				id: 1,
				course: "Type Theory",
				program: "computing science",
				EC: "6",
			},
			{
				id: 2,
				course: "Category Theory",
				program: "computing science",
				EC: "6",
			},
		],
		"id"
	);
	const controller = useListController();

	return (
		<DisplayTable
			title="Actions Table"
			rowActions={[
				{
					label: "Action Label1",
					icon: InsertEmoticon,
					onClick: (obj) => alert("clicked " + JSON.stringify(obj)),
				},
			]}
			headerActions={[
				{
					label: "Action Label2",
					icon: InsertEmoticon,
					onClick: () => alert("clicked 2"),
				},
			]}
			toolbarActions={[
				{
					label: "Action Label3",
					icon: InsertEmoticon,
					onClick: () => alert("clicked 3"),
				},
			]}
			groupActions={[
				{
					label: "Action Label4",
					icon: InsertEmoticon,
					onClick: () => alert("clicked 4"),
				},
			]}
			groupValue="program"
			values={values}
			columnLabels={{
				course: "Module",
				program: "Studie",
				EC: "EC",
			}}
			controller={controller}
			DisplayComponent={AnyField}
		/>
	);
}

Result

Loading...