@gravity-ui/uikit
Version:
Gravity UI base styling and components
103 lines (79 loc) • 5.17 kB
Markdown
# TableColumnSetup
The `TableColumnSetup` component provides a user interface for configuring table column visibility and order. It displays a button that opens a popup with a list of available columns, allowing users to show/hide columns and optionally reorder them via drag and drop.
```tsx
import {TableColumnSetup} from '@gravity-ui/uikit';
```
```tsx
const items = [
{id: 'name', title: 'Name', selected: true, required: true},
{id: 'email', title: 'Email', selected: true},
{id: 'phone', title: 'Phone', selected: false},
];
<TableColumnSetup items={items} onUpdate={(updatedItems) => console.log(updatedItems)} />;
```
## Sortable columns
Enable drag and drop functionality to allow users to reorder columns by setting the `sortable` property to `true`.
```tsx
<TableColumnSetup items={items} sortable onUpdate={(updatedItems) => console.log(updatedItems)} />
```
## Apply modes
Control when changes are applied using the `hideApplyButton` property:
- `true` - Changes are applied immediately when user toggles columns
- `false` - Changes are applied only when user clicks the Apply button
```tsx
<TableColumnSetup
items={items}
hideApplyButton
onUpdate={(updatedItems) => console.log(updatedItems)}
/>
```
## Status display
Show the count of selected columns in the switcher button by enabling the `showStatus` property.
```tsx
<TableColumnSetup
items={items}
showStatus={true}
onUpdate={(updatedItems) => console.log(updatedItems)}
/>
```
## Custom switcher
Customize the trigger button using the `renderSwitcher` property.
```tsx
<TableColumnSetup
items={items}
renderSwitcher={({onClick, onKeyDown}) => (
<Button onClick={onClick} onKeyDown={onKeyDown} view="outlined">
Configure Columns
</Button>
)}
onUpdate={(updatedItems) => console.log(updatedItems)}
/>
```
## Properties
| Name | Description | Type | Default |
| :-------------- | :-------------------------------------------------------------- | :---------------------------------------------------------: | :-----: |
| items | Array of column configuration items | `TableColumnSetupItem[]` | |
| onUpdate | Callback fired when column configuration changes | `(items: TableColumnSetupItem[]) => void` | |
| disabled | Disables the switcher button | `boolean` | `false` |
| sortable | Enables drag and drop sorting of columns | `boolean` | `true` |
| hideApplyButton | When to apply changes: immediately or manually via Apply button | `boolean` | `false` |
| showStatus | Shows selected/total columns count in switcher button | `boolean` | `false` |
| popupWidth | Width of the popup | `number \| 'fit'` | |
| popupPlacement | Popup placement relative to trigger | [`PopupPlacement`](./Popup.md#properties) | |
| renderSwitcher | Custom render function for the switcher button | `(props: SwitcherProps) => React.ReactElement \| undefined` | |
| switcher | **Deprecated.** Use `renderSwitcher` instead | `React.ReactElement \| undefined` | |
| getItemTitle | Function to get item title | `(item: TableColumnSetupItem) => React.ReactNode` | |
| className | Custom CSS class for the root element | `string` | |
### TableColumnSetupItem
| Name | Description | Type | Default |
| :------- | :------------------------------------------------ | :-----------------: | :-----: |
| id | Unique identifier for the column | `string` | |
| title | Display title for the column | `React.ReactNode` | |
| selected | Whether the column is currently visible | `boolean` | |
| required | Whether the column is required (cannot be hidden) | `boolean` | |
| sticky | Sticky positioning for the column | `'left' \| 'right'` | |
### SwitcherProps
| Name | Description | Type |
| :-------- | :------------------------------------- | :---------------------------------------: |
| onClick | Click event handler for the switcher | `React.MouseEventHandler<HTMLElement>` |
| onKeyDown | KeyDown event handler for the switcher | `React.KeyboardEventHandler<HTMLElement>` |