OrderedTable

Live Editor

function SimpleEditableTable() {
	const initialValues = keyBy(
		[
			{
				id: 0,
				listIndex: 1,
				course: "Linear Algebra",
				program: "mathematics",
				EC: "6",
			},
			{
				id: 1,
				listIndex: 2,
				course: "Type Theory",
				program: "computing science",
				EC: "6",
			},
			{
				id: 2,
				listIndex: 3,
				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>
						<IntegerField label="Index" value={value.listIndex} editable={false} />
						<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 (
		<OrderedTable
			title="Title"
			values={values}
			emptyValue={{
				id: 0,
				listIndex: values.length + 1,
				course: "",
				program: "",
				EC: "3",
			}}
			columnLabels={{
				listIndex: "Index",
				course: "Module",
				program: "Studie",
				EC: "EC",
			}}
			EditComponent={CourseComponent}
			controller={controller}
			inline
		/>
	);
}

Result

Loading...