Menu


Layout

PageTemplate

Storybook

The PageTemplate is a flexible layout component that structures a page's content, including search bars, filters, action buttons, and result displays. It allows easy customization of the header, footer, and interactive elements, ensuring a consistent and user-friendly interface.



Import
1import { PageTemplate } from 'dd360-ds'
1import PageTemplate from 'dd360-ds/PageTemplate'


Usage
PageTemplate Component
Children
1import { PageTemplate } from "dd360-ds"
2
3<PageTemplate title={{label:'PageTemplate Component'}}>Children</PageTemplate>
4


Children

With the prop Children, you can pass any valid React node to be rendered as the main content inside the PageTemplate component. This allows you to define custom content, such as text, components, or elements, within the layout.

PageTemplate Component
Children
1import { PageTemplate } from "dd360-ds"
2
3<PageTemplate title={{label:'PageTemplate Component'}}>Children</PageTemplate>
4


Search

With the prop Search, you can pass an object with properties like value, onChange, placeholder, and disabled to render a search bar within the PageTemplate component. This allows users to search and filter content directly from the header.

PageTemplate Component
Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4  title={{label:'PageTemplate Component'}} 
5  search={{onchange:()=>alert('searching...'),
6  value:'Search',placeholder:'Search',disabled:true}}>
7  Children</PageTemplate>
8


Results

With the prop Results, you can pass an object with properties like number and label to display the number of results and a custom label within the PageTemplate component. This helps users quickly understand the amount of available data.

PageTemplate Component

4results

Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4  title={{label:'PageTemplate Component'}} 
5  results={{number:4,label:'results'}}>
6  Children
7  </PageTemplate>
8


ViewToggle

With the prop ViewToggle, you can pass an object with properties like onToggle, isActive, iconOff, and iconOn to enable a toggle button within the PageTemplate component. This allows users to switch between different views, such as list or grid.

PageTemplate Component

4results

Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4  title={{label:'PageTemplate Component'}} 
5  results={{number:4,label:'results'}}
6  viewToggle= {{
7     onToggle: () => alert('View toggled'),
8     isActive: false,
9     iconOff: <span>A</span>,
10     iconOn: <span>B</span>}
11  }>
12  Children
13  </PageTemplate>
14


Filters

With the prop Filters, With the prop Filters, you can pass an object to define filtering options within the PageTemplate component. This allows you to add dropdown checkboxes with customizable options, labels, and callback functions for submission and closing.

PageTemplate Component
Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4   title={{label:'PageTemplate Component'}} 
5   filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
6        confirmText: 'Confirm',
7        onSubmit: () => alert('Checkbox filter submitted'),
8        onClose: () => alert('Checkbox filter closed'),
9        title: 'Filter Options',
10        align: 'left',
11        options: [ 
12        { label: 'Option 1', value: 'option1' }, 
13        { label: 'Option 2', value: 'option2' },
14        { label: 'Option 3', value: 'option3' }
15        ],
16        allText: 'Select All',
17        initialValue: ['option1']
18      }
19     ]}}>
20  Children
21  </PageTemplate>
22


ClearFilters

With the prop ClearFilters, you can pass an object to define a button or action to reset the filters applied within the PageTemplate component. This allows you to customize the button label and define a callback function that executes when the button is clicked.

PageTemplate Component
Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4   title={{label:'PageTemplate Component'}} 
5   filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
6        confirmText: 'Confirm',
7        onSubmit: () => alert('Checkbox filter submitted'),
8        onClose: () => alert('Checkbox filter closed'),
9        title: 'Filter Options',
10        align: 'left',
11        options: [ 
12        { label: 'Option 1', value: 'option1' }, 
13        { label: 'Option 2', value: 'option2' },
14        { label: 'Option 3', value: 'option3' }
15        ],
16        allText: 'Select All',
17        initialValue: ['option1']
18      }
19     ]}}
20    clearFilters={{
21    label: 'Restore',
22    onClick: () => alert('Filters have been reset')
23    }}>
24  Children
25  </PageTemplate>
26


CallToAction

With the prop CallToAction, you can pass an object to define a customizable button within the PageTemplate component. This allows you to specify a label, an icon, and an onClick event handler to define the action that will be executed when the button is clicked.

PageTemplate Component
Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4   title={{label:'PageTemplate Component'}} 
5   filters={{ dropdownCheckbox: [{ cancelText: 'Cancel',
6        confirmText: 'Confirm',
7        onSubmit: () => alert('Checkbox filter submitted'),
8        onClose: () => alert('Checkbox filter closed'),
9        title: 'Filter Options',
10        align: 'left',
11        options: [ 
12        { label: 'Option 1', value: 'option1' }, 
13        { label: 'Option 2', value: 'option2' },
14        { label: 'Option 3', value: 'option3' }
15        ],
16        allText: 'Select All',
17        initialValue: ['option1']
18      }
19     ]}}
20   callToAction={{
21        onClick: () => alert('call to action clicked'),
22        label: 'Call to action',
23        icon: "CalendarIcon"  }}>
24  Children
25  </PageTemplate>
26


ArrowSelector

With the prop ArrowSelector, you can pass an object to display left and right navigation buttons within the PageTemplate component. This allows you to define a label and set onClickLeft and onClickRight event handlers to execute custom actions when the user clicks the left or right buttons.

PageTemplate Component

4results

Action Move
Children
1import { PageTemplate } from "dd360-ds"
2
3  <PageTemplate 
4   title={{label:'PageTemplate Component'}} 
5    results={{number:4,label:'results'}}
6    arrowSelector={ {
7    label: 'Move to Month',
8    onClickLeft: () => alert('Navigated left'),
9    onClickRight: () => alert('Navigated right')
10    }}
11  Children
12  </PageTemplate>
13


API Reference
NameTypesDefault
"children"
React.React.Node
-
"footer"
React.React.Node
-
"search"
FilterSearchProps
-
"results"
FilterLabelProps
-
"viewToggle"
ToggleButtonProps
-
"filters"
FiltersProps
-
"clearFilters"
ClearFiltersProps
-
"callToAction"
CallToActionProps
-
"arrowSelector"
ArrowSelectorProps
-
"role"
string
-
"hiddenFilterBar"
boolean
-
"...otherProps"
TopPageProps
-
OverflowRow