Calculated column value

[bliu886]

I'm given a list of user's birthdays and I want to display in the data grid the calculated age of the user. How do you define a column to be a calculated value?

This is my DataGrid definition:

const gridElement: JSX.Element = (
	<DataGrid
		style={{ maxHeight: "80vh", height: "900px" }}
		className={darkMode === "dark" ? "rdg-dark" : "rdg-light"}
		columns={columns}
		rows={users ?? []}
		renderers={{ noRowsFallback: <EmptyRowsRenderer /> }}
		onRowsChange={(rows: UserList) => {
			setUsers(rows);
		}}
		rowKeyGetter={rowKeyGetter}
		defaultColumnOptions={{
			sortable: true,
			resizable: true,
		}}
		onCellClick={(cell: CellClickArgs<NoInfer<User>, unknown>) => {
			props.ViewUserProfile(cell.row);
		}}
	/>
);

And this is my columns object (what is the key for "age"?) :

const columns = [
	{
		key: "firstName",
		name: "First Name",
		flex: 1,
	},
	{
		key: "lastName",
		name: "Last Name",
		// editable: true,
		// renderEditCell: textEditor,
		flex: 1,
	},
	{
		key: "gender",
		name: "Gender",
		flex: 1,
	},
	{
		key: ???,
		name: "Age",
		flex: 1,
	},
	{
		key: "phoneNumber",
		name: "Phone Number",
		flex: 1,
	},
	{
		key: "email",
		name: "Email",
		flex: 1,
	},
];

[paustint]

Just use a custom cell renderer and you can do whatever you want to do there as shown in the examples:
e.g.

react-data-grid/website/routes/CommonFeatures.lazy.tsx

Lines 145 to 152 in 4faa0a1

	renderCell(props) {
	const value = props.row.progress;
	return (
	<>
	<progress max={100} value={value} style={{ inlineSize: 50 }} /> {Math.round(value)}%
	</>
	);
	},