VisibilityPlugin

Column Visibility Plugin for tbw-grid

Gives users control over which columns are displayed. Hide less important columns by default, let users toggle them via a column chooser UI, or programmatically show/hide columns based on user preferences or screen size.

> Optional Enhancement: When ReorderPlugin is also loaded, columns in the > visibility panel become draggable for reordering.

Installation

import { VisibilityPlugin } from '@toolbox-web/grid/plugins/visibility';

Configuration Options

Option	Type	Default	Description
allowHideAll	boolean	false	Allow hiding all columns (no minimum)

Column Configuration

Property	Type	Default	Description
visible	boolean	true	Initial visibility state
meta.lockVisibility	boolean	false	Prevent user from toggling

Programmatic API

Method	Signature	Description
hideColumn	(field: string) => void	Hide a column
showColumn	(field: string) => void	Show a column
toggleColumn	(field: string) => void	Toggle visibility
showAllColumns	() => void	Show all columns
getHiddenColumns	() => string[]	Get list of hidden column fields

CSS Custom Properties

Property	Default	Description
--tbw-visibility-hover	var(--tbw-color-row-hover)	Row hover background
--tbw-panel-padding	0.75em	Panel content padding
--tbw-panel-gap	0.5em	Gap between items

Examples

Columns Hidden by Default

import { queryGrid } from '@toolbox-web/grid';
import { VisibilityPlugin } from '@toolbox-web/grid/plugins/visibility';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'id', header: 'ID' },
    { field: 'name', header: 'Name' },
    { field: 'phone', header: 'Phone', visible: false }, // Hidden by default
    { field: 'address', header: 'Address', visible: false },
  ],
  plugins: [new VisibilityPlugin()],
};

// Toggle programmatically
const plugin = grid.getPluginByName('visibility');
plugin.showColumn('phone');

With Drag-to-Reorder

import { VisibilityPlugin } from '@toolbox-web/grid/plugins/visibility';
import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';

grid.gridConfig = {
  plugins: [
    new ReorderPlugin(),      // Enables drag-drop in visibility panel
    new VisibilityPlugin(),
  ],
};

See Also

• VisibilityConfig for configuration options
• ReorderPlugin for drag-to-reorder integration

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Properties

Property	Type	Description
PANEL_ID	columns	Tool panel ID for shell integration

Methods

show()

Show the visibility sidebar panel. Opens the tool panel and ensures this section is expanded.

show(): void

---

hide()

Hide the visibility sidebar panel.

hide(): void

---

toggle()

Toggle the visibility sidebar panel section.

toggle(): void

---

isColumnVisible()

Check if a specific column is visible. Delegates to grid.isColumnVisible().

isColumnVisible(field: string): boolean

Parameters

Name	Type	Description
field	string	The field name to check

Returns

boolean - True if the column is visible

---

setColumnVisible()

Set visibility for a specific column. Delegates to grid.setColumnVisible().

setColumnVisible(field: string, visible: boolean): void

Parameters

Name	Type	Description
field	string	The field name of the column
visible	boolean	Whether the column should be visible

---

getVisibleColumns()

Get list of all visible column fields.

getVisibleColumns(): string[]

Returns

string[] - Array of visible field names

---

getHiddenColumns()

Get list of all hidden column fields.

getHiddenColumns(): string[]

Returns

string[] - Array of hidden field names

---

showAll()

Show all columns. Delegates to grid.showAllColumns().

showAll(): void

---

toggleColumn()

Toggle visibility for a specific column. Delegates to grid.toggleColumnVisibility().

toggleColumn(field: string): void

Parameters

Name	Type	Description
field	string	The field name of the column

---

showColumn()

Show a specific column. Delegates to grid.setColumnVisible().

showColumn(field: string): void

Parameters

Name	Type	Description
field	string	The field name of the column to show

---

hideColumn()

Hide a specific column. Delegates to grid.setColumnVisible().

hideColumn(field: string): void

Parameters

Name	Type	Description
field	string	The field name of the column to hide

---

getAllColumns()

Get all columns with their visibility status. Useful for building visibility UI.

getAllColumns(): object[]

Returns

object[] - Array of column info with visibility status

---

isPanelVisible()

Check if the sidebar panel is currently open.

isPanelVisible(): boolean

Returns

boolean - True if the panel section is expanded

---