NotificationsYou must be signed in to change notification settings
Fork12
Star106

[table] configurable columns#681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Open

nellicus wants to merge6 commits intomain

base:main

Choose a base branch

fromclick-ui-table-configurable-columns

Open

[table] configurable columns#681

nellicus wants to merge6 commits intomainfromclick-ui-table-configurable-columns

Conversation

Copy link

Contributor

nellicus commentedOct 13, 2025•
edited
Loading

Add configurable column visibility to Table component

This PR adds the ability for users to show/hide optional columns in the Table component, with preferences automatically persisted to storage.

New Features

Column visibility toggle: Settings icon in the table header opens a popover to configure visible columns
Mandatory columns: Mark columns asmandatory: true to prevent them from being hidden
Persistent preferences: Column visibility choices are automatically saved and restored

New Props

TableHeaderType:

id?: string - Unique identifier for the column (auto-generated if not provided)
required?: boolean - If true, column cannot be hidden by the user
selected?: boolean - alternative torequired: if true, the non-required column will be rendered as optional andselected

Table:

enableColumnVisibility?: boolean - Enables the column visibility feature (default: false)
tableId?: string - Unique identifier for storing preferences (required when enableColumnVisibility is true)
onLoadColumnVisibility?: (tableId: string) => Record<string, boolean> - Optional custom function to load preferences (defaults to localStorage)
onSaveColumnVisibility?: (tableId: string, visibility: Record<string, boolean>) => void - Optional custom function to save preferences (defaults to localStorage)

Usage

<Tableheaders={[{id:"name",label:"Name",mandatory:true},// Always visible{id:"email",label:"Email"},// User can hide{id:"role",label:"Role"}// User can hide]}rows={rows}enableColumnVisibility={true}tableId="users-table"/>

By default, preferences are saved to localStorage with key click-ui-table-column-visibility-{tableId}. Optionally provide custom storage functions for alternative storage
mechanisms (API, IndexedDB, sessionStorage, etc.).

Backward Compatibility

✅ Fully backward compatible - existing tables continue to work unchanged. The feature is opt-in via enableColumnVisibility prop.

click-ui-table-column-visibility.webm

implement table configurable columns

0992476

Copy link

vercelbot commentedOct 13, 2025•
edited
Loading

The latest updates on your projects. Learn more aboutVercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
click-ui	Ready	Preview	Comment	Oct 15, 2025 3:58pm

update tests and prettify

2739b03

nellicus requested a review fromariser

October 13, 2025 13:39

vercelbotdeployed toPreview

October 13, 2025 13:40

View deployment

fix tests

1cf1223

vercelbotdeployed toPreview

October 13, 2025 13:51

View deployment

fix doublequotes in test

984c879

vercelbotdeployed toPreview

October 13, 2025 13:58

View deployment

fix eslint to allow strings to use single-quotes or double-quotes so …

b275249

…long as the string contains a quote that would have to be escaped otherwise

vercelbotdeployed toPreview

October 13, 2025 14:11

View deployment

nellicus requested a review fromvineethasok

October 13, 2025 14:20

ariser requested changes

Oct 13, 2025

View reviewed changes

Copy link

Collaborator

ariser left a comment•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

awesome job!
a few things I noticed:

src/components/Table/Table.tsx Outdated

		sortDir?:SortDir;
		sortPosition?:HorizontalDirection;
		width?:string;
		mandatory?:boolean;

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

NP:
requried? a more common term, I think
or maybeconfigurable: false?

Copy link

ContributorAuthor

nellicusOct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

changedhere

src/components/Table/Table.tsx

		/>
		))}
		{actionsList.length>0&&<colwidth={(actionsList.length+1)*32+10}/>}
		{enableColumnVisibility&&<colwidth={48}/>}

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

this includes padding, making the actual width less than the button width

src/components/Table/Table.tsx

Comment on lines +192 to +203

		{enableColumnVisibility&&(
		<StyledHeader
		aria-label="Column visibility"
		$size={size}
		>
		<ColumnVisibilityPopover
		headers={headers}
		visibleColumns={visibleColumns}
		onVisibilityChange={onVisibilityChange}
		/>
		</StyledHeader>
		)}

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

we should merge this heading cell with the actions heading cell
here, the columns icon should be above the actions column:

yes, we don't use these actions that much, and we should change how they are implemented
but still

src/components/Table/Table.tsx

		</ActionsContainer>
		</ActionsList>
		)}
		{enableColumnVisibility&&<TableData$size={size}/>}

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

what is this?

src/components/Table/Table.tsx

		<EllipsisContentcomponent="div">{label}</EllipsisContent>
		</TableData>
		))}
		{visibleItems.map(({ label, ...cellProps},visibleIndex)=>{

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

looks like on mobile we don't have a way to configure visible columns
we need to keep the button available somewhere

src/components/Table/Table.tsx Outdated


		headers.forEach((header,index)=>{
		constcolumnId=header.id\|\|`column-${index}`;
		// If mandatory, always visible. Otherwise, check stored preference (default true)

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

do we have a way to mark columns as initially hidden?

Copy link

ContributorAuthor

nellicusOct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

changedhere

src/components/Table/Table.tsx Outdated

		>
		<Checkbox
		checked={isVisible}
		disabled={isMandatory}

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

i can suggest using the lock icon instead of disabled checkbox for locked columns
smth like

maybe not make it muted as well, not that it's something secondary, it's just not available for configuration

Copy link

ContributorAuthor

nellicusOct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

changedhere

src/components/Table/Table.tsx Outdated

Comment on lines 986 to 993

		<ColumnVisibilityHeader>
		<Text
		size="sm"
		weight="semibold"
		>
		Columns
		</Text>
		</ColumnVisibilityHeader>

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

don't think this heading serves any purpose, lets not add it?

Copy link

ContributorAuthor

nellicusOct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

changedhere

src/components/Table/Table.tsx

		display: flex;
		align-items: center;
		gap: 0.5rem;
		cursor:${({ $disabled})=>($disabled ?"not-allowed" :"pointer")};

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Actual interactive area doesn't match the visually interactive area.
You can click at the empty space in the row, and it'll work. But usualy a checkbox clickable area is limited to its label, where there's an actual text.

It's a good thing that the row is clickable, but let's add visual feedback to make it obvious: a hover effect for the whole row, sometimng similar to what we have in CheckboxMultiSelect, or Dropdown

src/components/Table/Table.tsx

		size?:TableSize;
		showHeader?:boolean;
		rowHeight?:string;
		tableId?:string;

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

when not specified, it will silently not do anything
we need to make it required when the primary prop is enabled

typeType=|{enabled:true;tableId:string;}|{enabled?:false;tableId?:never;};

ariser reviewed

Oct 13, 2025

View reviewed changes

src/components/Table/Table.tsx Outdated

		<Popover.Trigger>
		<IconButton
		type="ghost"
		icon="settings"

Copy link

Collaborator

ariserOct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

i think I'm more used to seeing a gear icon in this context
but idk, this one works as well

Copy link

ContributorAuthor

nellicusOct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

changedhere

change settings icon, remove unneeded header, add selected (preselect…

217e9a9

…s the non required column), rename mandatory -> required, use lock icon for required col

vercelbotdeployed toPreview

October 15, 2025 15:58

View deployment

nellicus requested review fromelizabetdev andgjones

October 17, 2025 07:33

nellicus changed the title~~[table] column visibility~~[table] configurable columns

Oct 17, 2025

Labels

None yet

Movatterモバイル変換

[table] configurable columns#681

Are you sure you want to change the base?

[table] configurable columns#681

Uh oh!

Conversation

nellicus commentedOct 13, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Add configurable column visibility to Table component

New Features

New Props

Usage

Uh oh!

vercelbot commentedOct 13, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

ariser left a comment• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nellicus commentedOct 13, 2025•
edited
Loading

vercelbot commentedOct 13, 2025•
edited
Loading

ariser left a comment•
edited
Loading