2. Custom Column Integration in Table View

[MitchellShiell]

Thread customColumns entries through DictionaryTableViewer into SchemaTable and the column definitions, and add a "Columns" visibility control to the toolbar.

Table integration

For each configured entry, generate a TanStack Table column definition according to its mode:

• Path-based entries (metaPath): the framework calls getByDotPath to resolve the configured path against the SchemaField, then passes the result to MetaValueRenderer. The developer writes no rendering code; empty cells are produced automatically when the path resolves to nothing.
• Component-based entries (columnComponent): the framework passes the full SchemaField row as a prop to the supplied component. The component is responsible for its own rendering and for returning nothing when its target property is absent.

Custom columns appear after all four standard columns in the order they are declared in the configuration array.

Given a field structured like this:

{
	"name": "submitter_participant_id",
	"valueType": "string",
	"meta": {
		"mappings": {
			"FHIR": "Patient.Identifier",
			"mCODE.STU3": "Patient.Identifier",
			"Phenopacket": "individual.id"
		},
		"examples": ["90234", "BLD_donor_89", "AML-90"]
	}
}

A path-based column resolves and renders automatically:

<DictionaryTableViewer
	customColumns={[
		{ columnHeader: 'FHIR Mapping', metaPath: 'meta.mappings.FHIR' },
		{ columnHeader: 'Examples',     metaPath: 'meta.examples' },
	]}
/>

For submitter_participant_id this produces a "FHIR Mapping" cell showing Patient.Identifier and an "Examples" cell showing 90234, BLD_donor_89, AML-90. Fields with nothing at the configured path render an empty cell.

A component-based column receives the full SchemaField row and handles its own rendering:

const AllMappingsCell = ({ field }: { field: SchemaField }) => {
	const mappings = field.meta?.mappings;
	if (!mappings) return null;
	return (
		<ul>
			{Object.entries(mappings).map(([standard, value]) => (
				<li key={standard}><b>{standard}:</b> {value}</li>
			))}
		</ul>
	);
};

<DictionaryTableViewer
	customColumns={[
		{ columnHeader: 'FHIR Mapping', metaPath: 'meta.mappings.FHIR' },
		{ columnHeader: 'All Mappings', columnComponent: AllMappingsCell },
	]}
/>

Column visibility toggle

Add a "Columns" control to the toolbar that allows users to show or hide custom columns. The control lists only the configured custom columns, each with a checkbox, in the order they are declared in the customColumns prop. Standard columns (Fields, Attribute, Data Type, Allowed Values) are not included in this control. The control is only rendered when customColumns is configured and non-empty.

Default visibility for each custom column is configurable via a defaultVisible option on each customColumns entry. When defaultVisible is not set, the column is visible on load. Column visibility state persists for the session and resets to configured defaults when the user switches dictionary version.

Acceptance Criteria

• Configured custom columns appear in the table after the Allowed Values column
• Column order matches the order of entries in the customColumns array
• For path-based entries, the cell displays the value resolved from metaPath via getByDotPath, rendered by MetaValueRenderer; fields with nothing at that path render an empty cell
• For component-based entries, the cell renders the output of the configured component, which receives the full SchemaField row as a prop
• Custom columns appear in every schema table in the dictionary, not just the first
• Removing customColumns from the prop restores the original four-column table with no visual difference
• The "Columns" control appears in the toolbar when and only when customColumns is configured and non-empty
• The control lists only custom columns, each with a checkbox, in the configured order
• Checking a column makes it visible in the table immediately; unchecking it removes it immediately
• A custom column with defaultVisible: false is unchecked on initial load and on dictionary version change
• A custom column with no defaultVisible specified is unchecked on initial load
• Switching dictionary version resets all custom column visibility to the configured defaults
• Standard columns are unaffected by this control

Dependencies

Ticket 1

[joneubank]

Custom columns appear in every schema table in the dictionary, not just the first

Do we want the ability to specify that a column only applies to some schemas?

[joneubank]

Add the defaultVisible: boolean property into the previous ticket that defines the custom column object properties.

[joneubank]

Switching dictionary version resets all custom column visibility to the configured defaults

I would do the opposite, maintain column visibility through interactions.

For bonus marks, consider storing in the user's local storage the column visibility selection so that when the refresh the page the same columns are shown/hidden.