EditableTable

EditableTable extends DisplayTable.

EditableTable lets you add and remove rows in the table.

The editing can be done with a dialog or inline depending on the prop inline.

EditComponent is used to edit the row. inline is passed to this component to reflect either variant.

Adding a row through the toolbar button adds an emptyObject.

Dialog editing

Live Editor

function SimpleEditableTable() {
	const initialValues = 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"
	);

	//mock resource:
	const [values, controller] = useLocalList(initialValues);

	const CourseComponent = useMemo(
		() =>
			({ value, onChange, editable, inline }) => {
				return (
					<div>
						<StringField
							label="Module"
							value={value.course}
							editable={editable}
							onChange={(course) => onChange({ course })}
						/>
						<StringField
							label="Studie"
							value={value.program}
							editable={editable}
							onChange={(program) => onChange({ program })}
						/>
						<StringField
							label="EC"
							value={value.EC}
							editable={editable}
							onChange={(EC) => onChange({ EC })}
						/>
					</div>
				);
			},
		[]
	);

	return (
		<EditableTable
			title="Title"
			values={values}
			emptyValue={{
				id: 0,
				course: "",
				program: "",
				EC: "3",
			}}
			columnLabels={{
				course: "Module",
				program: "Studie",
				EC: "EC",
			}}
			EditComponent={CourseComponent}
			controller={controller}
		/>
	);
}

Result

Loading...

Inline editing

When you pass the inline property to the editable tables, each row will be editable right inside the table, instead of having to open a dialog. This is only applicable when the fields you wish to display are the same as those that need to be editable.

Live Editor

function SimpleEditableTable() {
	const initialValues = 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"
	);

	//mock resource:
	const [values, controller] = useLocalList(initialValues);

	const CourseComponent = useMemo(
		() =>
			({ value, onChange, editable, inline }) => {
				return (
					<div>
						<StringField
							label="Module"
							value={value.course}
							editable={editable}
							onChange={(course) => onChange({ course })}
						/>
						<StringField
							label="Studie"
							value={value.program}
							editable={editable}
							onChange={(program) => onChange({ program })}
						/>
						<StringField
							label="EC"
							value={value.EC}
							editable={editable}
							onChange={(EC) => onChange({ EC })}
						/>
					</div>
				);
			},
		[]
	);

	return (
		<EditableTable
			title="Title"
			values={values}
			emptyValue={{
				id: 0,
				course: "",
				program: "",
				EC: "3",
			}}
			columnLabels={{
				course: "Module",
				program: "Studie",
				EC: "EC",
			}}
			EditComponent={CourseComponent}
			controller={controller}
			inline
		/>
	);
}

Result

Loading...