Skip to main content

ListViewPivot

ListViewPivot renders a set of tabs, each bound to a SharePoint list view. Every tab declares its list, the columns to show, and an optional CAML query — switching tabs swaps the underlying view. Use it to present several related views (e.g. "My items", "Team", "Archived") in one control.

SPFx-oriented

Tabs reference SharePoint lists and CAML, so this component is used in SharePoint-hosted scenarios.

When to use​

  • Surface multiple filtered views of SharePoint data behind tabs.
  • Dashboards where users pivot between lists/queries without leaving the page.

Import​

import { ListViewPivot } from '@spartanfx/react';

Basic usage​

Provide tabs. Each tab has a tabName, listName, and columns (and optionally camlQuery, visible).

<ListViewPivot
  tabs={[
    {
      tabName: 'My items',
      listName: 'Projects',
      columns: [{ key: 'Title', name: 'Title', fieldName: 'Title' }],
      camlQuery: '<View><Query>…</Query></View>',
    },
    {
      tabName: 'Archived',
      listName: 'Projects',
      columns: [{ key: 'Title', name: 'Title', fieldName: 'Title' }],
      visible: true,
    },
  ]}
  onTabChange={(tab) => console.log('switched to', tab.tabName)}
/>

Key props​

PropTypeNotes
tabs (required)IListViewPivotTab[]Each: tabName, listName, columns, optional camlQuery, visible.
onTabChange(tab) => voidFires when the active tab changes.

See the full generated reference: ListViewPivot API ↗.

See also​