Field Panel

The Pivot field panel renders the active field layout above the grid. Use it when users need to see or rearrange row, column, data, and filter fields without opening a separate configurator panel.

Source code

Vue vue

<template>
  <RevoGrid
    class="grow h-full cell-border"
    hide-attribution
    range
    resize
    filter
    :colSize="180"
    :source="rows"
    :pivot.prop="pivot"
    :theme="isDark ? 'darkCompact' : 'compact'"
    :plugins="plugins"
    :column-types="columnTypes"
    readonly
  />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';
import NumberColumnType from '@revolist/revogrid-column-numeral';
import RevoGrid, { type GridPlugin } from '@revolist/vue3-datagrid';
import { PivotPlugin } from '@revolist/revogrid-enterprise';
import { AdvanceFilterPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { PIVOT_TOTALS, PIVOT_TOTALS_ROWS } from '../sys-data/pivot.totals';

const { isDark } = currentThemeVue();

const columnTypes = ref({
  currency: new NumberColumnType('$0,0.00'),
});

const plugins: GridPlugin[] = [PivotPlugin, AdvanceFilterPlugin, RowOddPlugin];
const rows = ref(PIVOT_TOTALS_ROWS);
const pivot = computed(() => ({
  ...PIVOT_TOTALS,
  filters: ['year'],
  fieldPanel: {
    visible: true,
    allowFieldDragging: true,
    showDataFields: true,
    showRowFields: true,
    showColumnFields: true,
    showFilterFields: true,
    texts: {
      dropFilterFieldsHere: 'Drop Filter Fields Here',
    },
  },
}));
</script>

Enable It

const pivot = {
  dimensions: [...],
  rows: ['region', 'rep'],
  columns: ['year', 'quarter'],
  values: [{ prop: 'sales', aggregator: 'sum' }],
  filters: ['year'],
  fieldPanel: {
    visible: true,
    allowFieldDragging: true,
    allowFieldRemoving: false,
    showDataFields: true,
    showRowFields: true,
    showColumnFields: true,
    showFilterFields: true,
    texts: {
      dropFilterFieldsHere: 'Drop Filter Fields Here',
    },
  },
};

Options

• fieldPanel.visible: mounts the compact in-grid field panel.
• allowFieldDragging: enables drag-and-drop between panel areas.
• allowFieldRemoving: enables explicit removal from areas. Default is false.
• showDataFields, showRowFields, showColumnFields, showFilterFields: toggle individual areas.
• fieldPanel.texts: overrides field panel labels and placeholders.
• filters: stores the ordered filter fields shown in the filter area.

fieldPanel.visible is separate from hasConfigurator. Use fieldPanel.visible for the compact in-grid field strip, and hasConfigurator for the full side configurator.