Skip to Content

Pinning Columns

UI / UX: Scroll Column Headers and Aggregate Totals, Freeze Columns when Scrolling

Vinyl supports the ability to pin or freeze a column of data in a panel, pin or freeze Labels appearing at the top of a panel, and also freeze Aggregate values appearing at the bottom of a panel. This article steps you through how to take advantage of these features. Note there are some limitations for these features, listed at the end of the article.

In order to take advantage of these UI/UX features, you must Disable Column Selection Service for the Panel. Once Columns Selection Service is disabled, the following features are available:

  • Freeze a Column of Data in a Panel
  • Freeze Labels at the Top of a Panel
  • Freeze Aggregates at the Bottom of a Panel

To Disable Column Selection Service

  1. Navigate to the Page with the Panel you want to modify
  2. Go to the Action Drawer, and select Live Designer
  3. Select the panel from the design view
  4. From the Panel tab, select Scrolling as the Responsive Design Setting
  5. Click the Save button

To Select a Column to Freeze in a Panel

Vinyl gives you the ability to select a specific column of data to be pinned, or frozen, so that when you scroll horizontally the selected Column always stays visible.

Note

In order to configure this setting you must first follow the instructions to Disable Column Selection Service.

To select a Column to be Pinned

  1. Navigate to the page with the panel you want to modify
  2. Go to the Action Drawer > Live Designer
  3. Select the control to pin from the design view
  4. Click the Position & Width tab
  5. Check to enable Pinned
  6. Click the Save button

Limitations

Please note the following limitations exist for these new UI/UX features:

  • IE11 performance is known to be not optimal
  • If you don't provide a Width, the Column will be as wide as the data. This is not an issue for smaller data sets, however if, for example, you have 25 rows with narrow data, that Column becomes locked. If you press Load More Rows and now you have wide data, the column won't expand.
  • iOS has some inconsistent scrolling behavior if you over-scroll (meaning scroll beyond the first or last row)
  • You can't use wrapping fields such as text areas. The rows need to be the same height both pinned and unpinned.
  • If you use images, they may not size/scale correctly