Skip to main content
RefineDocumentation
Version: 5.xx.xx
Source Code

List

<ListView /> provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.

The ListView component is designed for displaying a list of records with automatic resource detection, breadcrumb navigation, and an optional create button.

Installation​

npx shadcn@latest add https://ui.refine.dev/r/views.json

This will install all view components including ListView.

Usage​

import {
  ListView,
  ListViewHeader,
} from "@/components/refine-ui/views/list-view";
import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";

export default function PostListPage() {
  const isLoading = false; // or true, based on your data fetching state
  const error = null; // or object, based on your data fetching state

  if (error) {
    return (
      <ListView>
        <ListViewHeader />
        {/* Error content */}
      </ListView>
    );
  }

  return (
    <ListView>
      <ListViewHeader />
      <LoadingOverlay loading={isLoading}>
        {/* Record content (e.g., DataTable) */}
      </LoadingOverlay>
    </ListView>
  );
}

Features​

  • Resource Integration: Automatic resource detection and title generation
  • Breadcrumb Navigation: Built-in breadcrumb component
  • Optional Create Button: CreateButton (from buttons package) is displayed based on resource definition or canCreate prop

API Reference​

ListView Properties​

PropTypeDefaultDescription
childrenReactNode-Content to render inside the view
classNamestring-Additional CSS classes for the container

ListViewHeader Properties​

PropTypeDefaultDescription
resourcestringCurrent resourceOverride the resource name for title and actions
titlestringAuto-generatedCustom title for the header
hideBreadcrumbbooleanfalseSet to true to hide the breadcrumb
wrapperClassNamestring-CSS classes for the header's main wrapper div
headerClassNamestring-CSS classes for the div containing title and actions
canCreatebooleanResource defaultManually control visibility of the create button

Advanced Usage​

Custom Title and Actions​

import {
  ListView,
  ListViewHeader,
} from "@/components/refine-ui/views/list-view";
import { Button } from "@/components/ui/button";

export default function PostListPage() {
  return (
    <ListView>
      <ListViewHeader title="My Custom Posts List" canCreate={false} />
      {/* Your list content */}
    </ListView>
  );
}

Hide Breadcrumb​

<ListViewHeader hideBreadcrumb={true} />

Custom CSS Classes​

<ListView className="my-custom-list">
  <ListViewHeader
    wrapperClassName="custom-header-wrapper"
    headerClassName="custom-header-content"
  />
</ListView>
Previous
Edit
Next
Show