Skip to main content

ListView

@spartanfx/react v1.2.2

@spartanfx/react / spfx / ListView

Variable: ListView

const ListView: React.FunctionComponent<IListViewProps>;

Renders a powerful, configurable SharePoint list viewer with support for:

  • Fluent UI DetailsList and responsive tile view
  • Column filtering, sorting, and search
  • Export to Excel
  • Infinite scrolling
  • Custom field renderers

This component is highly extensible and can be themed, localized, and dynamically updated through the ListViewService.

Deprecated​

DEPRECATED - This component is deprecated and will be removed in a future version.

Replacement: Use DataTable component instead.

DataTable provides the same functionality (filtering, sorting, search, export, tile view) without direct SPFx dependencies. For SharePoint integration, use the useSharePointDataTable hook with DataTable.

Examples​

Migrating from ListView to DataTable

// Before (ListView)
const listViewService = new ListViewService({ sp, listName: 'MyList', camlQuery: caml})
<ListView
  listViewService={listViewService}
  columns={columns}
  context={webPartContext}
/>

// After (DataTable with useSharePointDataTable)
const dataTableProps = useSharePointDataTable({ sp, listName: 'MyList', context: webPartContext, camlQuery: caml, columns: columns });
<DataTable {...dataTableProps} />

List View with only mandatory props

<ListView
  listViewService={listViewService}
  columns={[
    { fieldName: 'Title' },
    { fieldName: 'Status' }
  ]}
  context={context}
/>

List View with selection activated

<ListView
  listViewService={listViewService}
  columns={[
    { fieldName: 'Title' },
    { fieldName: 'Status' }
  ]}
  context={context}
  selectionMode={SelectionMode.multiple}
  onSelectionChanged={(selectedItems: any[]) => console.log(selectedtems)}
/>