Column Management

Rowstack provides users with complete control over how they view their data. Columns can be resized, hidden, or reordered to create the perfect layout.

#Resizing Columns

Users can manually adjust the width of any column by dragging the handle on the right side of the column header.

• Double-click the handle to auto-fit the column to its content (if supported).
• Rowstack remembers these widths internally and returns them in the onChange callback.

#Hiding Fields

To reduce visual noise, users can hide columns they don't currently need.

#The "Hide Fields" Menu

Accessible from the toolbar, this menu shows a list of all available columns with toggles to show or hide them.

const config = {
  hideFields: {
    enabled: true
  }
};

#Programmatic Visibility

You can also set the initial visibility of a column in your column definitions:

const columns = [
  {
    id: "metadata",
    name: "Metadata",
    isVisible: false // Hidden by default
  }
];

#Reordering Columns

Users can change the order of columns by dragging the column headers and dropping them into a new position. This allows users to prioritize the most important information.

#Row Height

Rowstack supports different row height presets (e.g., Short, Medium, Tall) to adjust the information density of the grid.

const config = {
  rowHeight: {
    enabled: true
  }
};