Skip to main content

PlanningEventListView

This component allows you to integrate the agenda list at the event level.

How it looks​

Code sample​

import { PlanningEventListView } from "@swapcard/react-sdk/lib/planning/event-list-view";

export function YourPlanningListPage() {
  return <PlanningEventListView viewId="<YOUR_PLANNING_EVENT_VIEW_ID_HERE>" />;
}

Available props​

  • viewId string (required)

    ID of the view you want to render

  • renderPlanningCard (node: ReactNode, planning: Planning) => ReactNode

    Render function to wrap each planning cells into your own links.

    renderPlanningCard={(node, planning) => <a href={`/path/to/planning/${planning.id}`}>{node}</a>}

  • search string

    Used to filter result based on user search (to combine with onSearch)

  • onSearch (search: string) => void

    Callback when user searches through the input (to combine with search)

  • selectedFilters Filter[]

    Used to filter result based on user filters (to combine with onFilter)

  • onFilter (filters: Filter[]) => void

    Callback when user filters through checkboxes (to combine with selectedFilters)

  • aggregationId string

    Used to filter result based on agenda top navigation (to combine with onChangeAggregationId)

  • onChangeAggregationId (aggregationId: string) => void

    Callback when user filters through top navigation (to combine with aggregationId)

  • stickyOffset number

    Search and filter containers will be sticky while the user scrolls (this represents the number in pixel from the top of the body)