[table] configurable columns #681
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…long as the string contains a quote that would have to be escaped otherwise
src/components/Table/Table.tsx
Outdated
| sortDir?: SortDir; | ||
| sortPosition?: HorizontalDirection; | ||
| width?: string; | ||
| mandatory?: boolean; |
There was a problem hiding this comment.
NP:
requried? a more common term, I think
or maybe configurable: false?
| /> | ||
| ))} | ||
| {actionsList.length > 0 && <col width={(actionsList.length + 1) * 32 + 10} />} | ||
| {enableColumnVisibility && <col width={48} />} |
There was a problem hiding this comment.
this includes padding, making the actual width less than the button width
| {enableColumnVisibility && ( | ||
| <StyledHeader | ||
| aria-label="Column visibility" | ||
| $size={size} | ||
| > | ||
| <ColumnVisibilityPopover | ||
| headers={headers} | ||
| visibleColumns={visibleColumns} | ||
| onVisibilityChange={onVisibilityChange} | ||
| /> | ||
| </StyledHeader> | ||
| )} |
There was a problem hiding this comment.
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
| </ActionsContainer> | ||
| </ActionsList> | ||
| )} | ||
| {enableColumnVisibility && <TableData $size={size} />} |
| <EllipsisContent component="div">{label}</EllipsisContent> | ||
| </TableData> | ||
| ))} | ||
| {visibleItems.map(({ label, ...cellProps }, visibleIndex) => { |
There was a problem hiding this comment.
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) => { | ||
| const columnId = header.id || `column-${index}`; | ||
| // If mandatory, always visible. Otherwise, check stored preference (default true) |
There was a problem hiding this comment.
do we have a way to mark columns as initially hidden?
src/components/Table/Table.tsx
Outdated
| > | ||
| <Checkbox | ||
| checked={isVisible} | ||
| disabled={isMandatory} |
There was a problem hiding this comment.
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
src/components/Table/Table.tsx
Outdated
| <ColumnVisibilityHeader> | ||
| <Text | ||
| size="sm" | ||
| weight="semibold" | ||
| > | ||
| Columns | ||
| </Text> | ||
| </ColumnVisibilityHeader> |
There was a problem hiding this comment.
don't think this heading serves any purpose, lets not add it?
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")}; |
There was a problem hiding this comment.
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
| size?: TableSize; | ||
| showHeader?: boolean; | ||
| rowHeight?: string; | ||
| tableId?: string; |
There was a problem hiding this comment.
when not specified, it will silently not do anything
we need to make it required when the primary prop is enabled
type Type =
| {
enabled: true;
tableId: string;
}
| {
enabled?: false;
tableId?: never;
};
src/components/Table/Table.tsx
Outdated
| <Popover.Trigger> | ||
| <IconButton | ||
| type="ghost" | ||
| icon="settings" |
There was a problem hiding this comment.
i think I'm more used to seeing a gear icon in this context
but idk, this one works as well
…s the non required column), rename mandatory -> required, use lock icon for required col
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
mandatory: trueto prevent them from being hiddenNew Props
TableHeaderType:
id?: string- Unique identifier for the column (auto-generated if not provided)required?: boolean- If true, column cannot be hidden by the userselected?: boolean- alternative torequired: if true, the non-required column will be rendered as optional and selectedTable:
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
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