ListViewPivot

3p-core v2.1.4

---

3p-core / ListViewPivot

Function: ListViewPivot()

ListViewPivot<T>(props): Element

Renders a Fluent UI Pivot component with dynamic tabs configured via props.

Type Parameters

T

T extends string

A string union type representing tab identifiers.

Parameters

props

ListViewPivotProps<T>

The props for the ListViewPivot component.

Returns

Element

A JSX element containing a pivot UI for list views.

Remarks

This component filters out tabs where visible is false, and defaults to selecting the first visible tab. When a tab is clicked, it triggers onTabChange with the corresponding tab configuration.

The component assumes that tabName values are unique across the provided tab array.

Examples

Minimal usage with two tabs:

const tabs = [
  { tabName: 'Active', listName: 'Tasks', columns: [{ name: 'Title' }], visible: true },
  { tabName: 'Completed', listName: 'Tasks', columns: [{ name: 'Title' }], visible: true },
];

<ListViewPivot tabs={tabs} />

Advanced usage with onTabChange and a hidden tab:

const handleTabChange = (tab) => {
  console.log('Selected tab:', tab.listName);
};

const tabs = [
  { tabName: 'Public', listName: 'PublicList', columns: [...], visible: true },
  { tabName: 'Private', listName: 'PrivateList', columns: [...], visible: false },
];

<ListViewPivot tabs={tabs} onTabChange={handleTabChange} />