diff --git a/components/doc/dataview/apidoc.js b/components/doc/dataview/apidoc.js new file mode 100644 index 0000000000..b2fa2aa856 --- /dev/null +++ b/components/doc/dataview/apidoc.js @@ -0,0 +1,454 @@ +import Link from 'next/link'; +import { CodeHighlight } from '../common/codehighlight'; +import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSubSection } from '../common/docsubsection'; + +export function ApiDoc(props) { + return ( + <> + + +
Properties of DataViewLayoutOptions
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
layoutstringlistLayout of the items, valid values are "list" and "grid".
dataKeystringnullA property to uniquely identify an item.
styleobjectnullInline style of the element.
classNamestringnullStyle class of the element.
+
+ + +
+ + + + + + + + + + + + + + + +
NameParametersDescription
onChange + event.originalEvent: browser event
+ event.value = layout mode e.g. "list" or "grid" + 		Callback to invoke when layout mode is changed.
+
+ + + +

+ Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. Visit the paginator{' '} + paginator component for more information about the available properties. +

+ +

+ Pagination can either be used in Controlled or Uncontrolled manner. In controlled mode, first and onPage properties needs to be defined to control the pagination state. +

+ + + {` + setFirst(e.first)}> +`} + + +

+ In uncontrolled mode, only paginator property needs to be enabled. Initial page state can be still be provided using the first property in uncontrolled mode however it is evaluated at initial rendering and ignored in + further updates. If you programmatically need to update the paginator, prefer to use the component as controlled. +

+ + {` + +`} + + + + +

+ sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a + dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting. +

+ + + {` +const sortOptions = [ + {label: 'Price High to Low', value: '!price'}, + {label: 'Price Low to High', value: 'price'}, +]; + +const header = ( +
+
+ +
+
+); + + + +`} + + + + {` +const onSortChange = (event) => { + const value = event.value; + + if (value.indexOf('!') === 0) { + setSortOrder(-1); + setSortField(value.substring(1, value.length)); + setSortKey(value); + } + else { + setSortOrder(1); + setSortField(value); + setSortKey(value); + } +} +`} + + + + +

+ Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination in controlled mode and utilize the onPage callback to load your data from the backend. Pagination in this case needs + to display the logical number of records so bind this value to the totalRecords property so that paginator can display itself according to the total records although you'd only need to load the data of the current page. + Refer to DataTable lazy loading for a sample implementation. +

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
headerJSX or stringnullHeader content of the component.
footerJSX or stringnullFooter content of the component.
valuearraynullAn array of objects to display.
layoutstringlistLayout of the items, valid values are "list" and "grid".
rowsnumbernullNumber of rows to display per page.
firstnumber0Index of the first record to render.
totalRecordsnumbernullNumber of total records, defaults to length of value when not defined.
paginatorbooleanfalseWhen specified as true, enables the pagination.
paginatorPositionstringbottomPosition of the paginator, options are "top","bottom" or "both".
alwaysShowPaginatorbooleantrueWhether to show it even there is only one page.
paginatorClassNamestringnullStyle class of the paginator element.
paginatorTemplatestring|objectFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown + Template of the paginator. For details, refer to the template section of the paginator documentation for further options. +
paginatorLeftElementnullContent for the left side of the paginator.
paginatorRightElementnullContent for the right side of the paginator.
pageLinkSizenumber5Number of page links to display.
rowsPerPageOptionsarraynullArray of integer values to display inside rows per page dropdown.
currentPageReportTemplatestring(&123;currentPage&125; of &123;totalPages&125;)Template of the current page report element.
paginatorDropdownAppendToDOM element | stringdocument.body + DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. +
emptyMessagestringNo records found.Text to display when there is no data.
sortFieldstringnullName of the field to sort data by default.
sortOrdernumbernullOrder to sort the data by default.
styleobjectnullInline style of the element.
classNamestringnullStyle class of the element.
lazybooleanfalseDefines if data is loaded and interacted with in lazy manner.
gutterbooleanfalseWhether the grid structure in the container has gutter. Default value is false.
itemTemplatefunctionnullFunction that gets the option along with the layout mdoe and returns the content.
+
+ + + +
+ + + + + + + + + + + + + + + +
NameParametersDescription
onPage + event.originalEvent: Browser event
+ event.first: Index of the first records on page.
+ event.rows: Number of records to display per page. + 		Callback to invoke on pagination.
+
+ + + +

+ Following is the list of structural style classes, for theming classes visit theming page. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-dataviewContainer element.
p-dataview-listContainer element in list layout.
p-dataview-gridContainer element in grid layout.
p-dataview-headerHeader section.
p-dataview-footerFooter section.
p-dataview-contentContainer of items.
+
+ + + + +

Screen Reader

+

+ The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the + buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively. +

+ +

+ Refer to paginator accessibility documentation for the paginator of the component. +

+ +

Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the buttons.
+ space + Toggles the checked state of a button.
+
+ + + + ); +} diff --git a/components/doc/dataview/basicdoc.js b/components/doc/dataview/basicdoc.js new file mode 100644 index 0000000000..30bb6ad0b9 --- /dev/null +++ b/components/doc/dataview/basicdoc.js @@ -0,0 +1,362 @@ +import React, { useState, useEffect } from 'react'; +import { DataView, DataViewLayoutOptions } from '../../lib/dataview/DataView'; +import { Button } from '../../lib/button/Button'; +import { Dropdown } from '../../lib/dropdown/Dropdown'; +import { Rating } from '../../lib/rating/Rating'; +import { ProductService } from '../../../service/ProductService'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function BasicDoc(props) { + const [products, setProducts] = useState(null); + const [layout, setLayout] = useState('grid'); + const [sortKey, setSortKey] = useState(null); + const [sortOrder, setSortOrder] = useState(null); + const [sortField, setSortField] = useState(null); + const sortOptions = [ + { label: 'Price High to Low', value: '!price' }, + { label: 'Price Low to High', value: 'price' } + ]; + + const productService = new ProductService(); + + useEffect(() => { + productService.getProducts().then((data) => setProducts(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const onSortChange = (event) => { + const value = event.value; + + if (value.indexOf('!') === 0) { + setSortOrder(-1); + setSortField(value.substring(1, value.length)); + setSortKey(value); + } else { + setSortOrder(1); + setSortField(value); + setSortKey(value); + } + }; + + const renderListItem = (data) => { + return ( +
+
+ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> +
+
{data.name}
+
{data.description}
+ + + {data.category} +
+
+ ${data.price} + + {data.inventoryStatus} +
+
+
+ ); + }; + + const renderGridItem = (data) => { + return ( +
+
+
+
+ + {data.category} +
+ {data.inventoryStatus} +
+
+ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> +
{data.name}
+
{data.description}
+ +
+
+ ${data.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') return renderListItem(product); + else if (layout === 'grid') return renderGridItem(product); + }; + + const renderHeader = () => { + return ( +
+
+ +
+
+ setLayout(e.value)} /> +
+
+ ); + }; + + const header = renderHeader(); + + const code = { + basic: ` + + `, + javascript: ` +import React, { useState, useEffect } from 'react'; +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; +import { Button } from 'primereact/button'; +import { Dropdown } from 'primereact/dropdown'; +import { ProductService } from '../service/ProductService'; +import { Rating } from 'primereact/rating'; + +export default function BasicDoc() { + const [products, setProducts] = useState(null); + const [layout, setLayout] = useState('grid'); + const [sortKey, setSortKey] = useState(null); + const [sortOrder, setSortOrder] = useState(null); + const [sortField, setSortField] = useState(null); + const sortOptions = [ + { label: 'Price High to Low', value: '!price' }, + { label: 'Price Low to High', value: 'price' } + ]; + + const productService = new ProductService(); + + useEffect(() => { + productService.getProducts().then((data) => setProducts(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const onSortChange = (event) => { + const value = event.value; + + if (value.indexOf('!') === 0) { + setSortOrder(-1); + setSortField(value.substring(1, value.length)); + setSortKey(value); + } else { + setSortOrder(1); + setSortField(value); + setSortKey(value); + } + }; + + const renderListItem = (data) => { + return ( +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
+
{data.name}
+
{data.description}
+ + + {data.category} +
+
+ \${data.price} + + {data.inventoryStatus} +
+
+
+ ); + }; + + const renderGridItem = (data) => { + return ( +
+
+
+
+ + {data.category} +
+ {data.inventoryStatus} +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
{data.name}
+
{data.description}
+ +
+
+ \${data.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') return renderListItem(product); + else if (layout === 'grid') return renderGridItem(product); + }; + + const renderHeader = () => { + return ( +
+
+ +
+
+ setLayout(e.value)} /> +
+
+ ); + }; + + const header = renderHeader(); + + return ( + + ) +} + `, + typescript: ` +import React, { useState, useEffect } from 'react'; +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; +import { Button } from 'primereact/button'; +import { Dropdown } from 'primereact/dropdown'; +import { ProductService } from '../service/ProductService'; +import { Rating } from 'primereact/rating'; + +export default function BasicDoc() { + const [products, setProducts] = useState(null); + const [layout, setLayout] = useState('grid'); + const [sortKey, setSortKey] = useState(null); + const [sortOrder, setSortOrder] = useState(null); + const [sortField, setSortField] = useState(null); + const sortOptions = [ + { label: 'Price High to Low', value: '!price' }, + { label: 'Price Low to High', value: 'price' } + ]; + + const productService = new ProductService(); + + useEffect(() => { + productService.getProducts().then((data) => setProducts(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const onSortChange = (event) => { + const value = event.value; + + if (value.indexOf('!') === 0) { + setSortOrder(-1); + setSortField(value.substring(1, value.length)); + setSortKey(value); + } else { + setSortOrder(1); + setSortField(value); + setSortKey(value); + } + }; + + const renderListItem = (data) => { + return ( +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
+
{data.name}
+
{data.description}
+ + + {data.category} +
+
+ \${data.price} + + {data.inventoryStatus} +
+
+
+ ); + }; + + const renderGridItem = (data) => { + return ( +
+
+
+
+ + {data.category} +
+ {data.inventoryStatus} +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
{data.name}
+
{data.description}
+ +
+
+ \${data.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') return renderListItem(product); + else if (layout === 'grid') return renderGridItem(product); + }; + + const renderHeader = () => { + return ( +
+
+ +
+
+ setLayout(e.value)} /> +
+
+ ); + }; + + const header = renderHeader(); + + return ( + + ) +} + ` + }; + + return ( + <> + +

DataView displays data in grid or list layout with pagination and sorting features.

+ +
+ +
+ + + ); +} diff --git a/components/doc/dataview/importdoc.js b/components/doc/dataview/importdoc.js new file mode 100644 index 0000000000..e63cb7aa93 --- /dev/null +++ b/components/doc/dataview/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/dataview/index.js b/components/doc/dataview/index.js deleted file mode 100644 index a5c99f8b30..0000000000 --- a/components/doc/dataview/index.js +++ /dev/null @@ -1,1186 +0,0 @@ -import React, { memo } from 'react'; -import Link from 'next/link'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { useLiveEditorTabs } from '../common/liveeditor'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; - -const DataViewDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { Button } from 'primereact/button'; -import { Dropdown } from 'primereact/dropdown'; -import { ProductService } from '../service/ProductService'; -import { Rating } from 'primereact/rating'; -import './DataViewDemo.css'; - -export class DataViewDemo extends Component { - - constructor(props) { - super(props); - this.state = { - products: null, - layout: 'grid', - sortKey: null, - sortOrder: null, - sortField: null - }; - - this.sortOptions = [ - {label: 'Price High to Low', value: '!price'}, - {label: 'Price Low to High', value: 'price'}, - ]; - - this.productService = new ProductService(); - this.itemTemplate = this.itemTemplate.bind(this); - this.onSortChange = this.onSortChange.bind(this); - } - - componentDidMount() { - this.productService.getProducts().then(data => this.setState({ products: data })); - } - - onSortChange(event) { - const value = event.value; - - if (value.indexOf('!') === 0) { - this.setState({ - sortOrder: -1, - sortField: value.substring(1, value.length), - sortKey: value - }); - } - else { - this.setState({ - sortOrder: 1, - sortField: value, - sortKey: value - }); - } - } - - renderListItem(data) { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - renderGridItem(data) { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - itemTemplate(product, layout) { - if (!product) { - return; - } - - if (layout === 'list') - return this.renderListItem(product); - else if (layout === 'grid') - return this.renderGridItem(product); - } - - renderHeader() { - return ( -
-
- -
-
- this.setState({ layout: e.value })} /> -
-
- ); - } - - render() { - const header = this.renderHeader(); - - return ( -
-
- -
-
- ); - } -} - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useState, useEffect } from 'react'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { Button } from 'primereact/button'; -import { Dropdown } from 'primereact/dropdown'; -import { ProductService } from '../service/ProductService'; -import { Rating } from 'primereact/rating'; -import './DataViewDemo.css'; - -const DataViewDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [sortKey, setSortKey] = useState(null); - const [sortOrder, setSortOrder] = useState(null); - const [sortField, setSortField] = useState(null); - const sortOptions = [ - {label: 'Price High to Low', value: '!price'}, - {label: 'Price Low to High', value: 'price'}, - ]; - - const productService = new ProductService(); - - useEffect(() => { - productService.getProducts().then(data => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onSortChange = (event) => { - const value = event.value; - - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } - else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } - } - - const renderListItem = (data) => { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') - return renderListItem(product); - else if (layout === 'grid') - return renderGridItem(product); - } - - const renderHeader = () => { - return ( -
-
- -
-
- setLayout(e.value)} /> -
-
- ); - } - - const header = renderHeader(); - - return ( -
-
- -
-
- ); -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useState, useEffect } from 'react'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { Button } from 'primereact/button'; -import { Dropdown } from 'primereact/dropdown'; -import { ProductService } from '../service/ProductService'; -import { Rating } from 'primereact/rating'; -import './DataViewDemo.css'; - -const DataViewDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [sortKey, setSortKey] = useState(null); - const [sortOrder, setSortOrder] = useState(null); - const [sortField, setSortField] = useState(null); - const sortOptions = [ - {label: 'Price High to Low', value: '!price'}, - {label: 'Price Low to High', value: 'price'}, - ]; - - const productService = new ProductService(); - - useEffect(() => { - productService.getProducts().then(data => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onSortChange = (event) => { - const value = event.value; - - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } - else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } - } - - const renderListItem = (data) => { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') - return renderListItem(product); - else if (layout === 'grid') - return renderGridItem(product); - } - - const renderHeader = () => { - return ( -
-
- -
-
- setLayout(e.value)} /> -
-
- ); - } - - const header = renderHeader(); - - return ( -
-
- -
-
- ); -} - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - - - - `, - content: ` -const { useEffect, useState } = React; -const { DataView, DataViewLayoutOptions } = primereact.dataview; -const { Button } = primereact.button; -const { Dropdown } = primereact.dropdown; -const { Rating } = primereact.rating; - -const DataViewDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [sortKey, setSortKey] = useState(null); - const [sortOrder, setSortOrder] = useState(null); - const [sortField, setSortField] = useState(null); - const sortOptions = [ - {label: 'Price High to Low', value: '!price'}, - {label: 'Price Low to High', value: 'price'}, - ]; - - const productService = new ProductService(); - - useEffect(() => { - productService.getProducts().then(data => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onSortChange = (event) => { - const value = event.value; - - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } - else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } - } - - const renderListItem = (data) => { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') - return renderListItem(product); - else if (layout === 'grid') - return renderGridItem(product); - } - - const renderHeader = () => { - return ( -
-
- -
-
- setLayout(e.value)} /> -
-
- ); - } - - const header = renderHeader(); - - return ( -
-
- -
-
- ); -} - ` - } - }; - - const extFiles = { - 'demo/DataViewDemo.css': { - content: ` -.dataview-demo .p-dropdown { - width: 14rem; - font-weight: normal; -} - -.dataview-demo .product-name { - font-size: 1.5rem; - font-weight: 700; -} - -.dataview-demo .product-description { - margin: 0 0 1rem 0; -} - -.dataview-demo .product-category-icon { - vertical-align: middle; - margin-right: .5rem; -} - -.dataview-demo .product-category { - font-weight: 600; - vertical-align: middle; -} - -.dataview-demo .product-list-item { - display: flex; - align-items: center; - padding: 1rem; - width: 100%; -} - -.dataview-demo .product-list-item img { - width: 150px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - margin-right: 2rem; -} - -.dataview-demo .product-list-item .product-list-detail { - flex: 1 1 0; -} - -.dataview-demo .product-list-item .p-rating { - margin: 0 0 .5rem 0; -} - -.dataview-demo .product-list-item .product-price { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: .5rem; - align-self: flex-end; -} - -.dataview-demo .product-list-item .product-list-action { - display: flex; - flex-direction: column; -} - -.dataview-demo .product-list-item .p-button { - margin-bottom: .5rem; -} - -.dataview-demo .product-grid-item { - margin: .5em; - border: 1px solid var(--surface-border); - padding: 2rem; -} - -.dataview-demo .product-grid-item .product-grid-item-top, - .dataview-demo .product-grid-item .product-grid-item-bottom { - display: flex; - align-items: center; - justify-content: space-between; -} - -.dataview-demo .product-grid-item img { - width: 75%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - margin: 2rem 0; -} - -.dataview-demo .product-grid-item .product-grid-item-content { - text-align: center; -} - -.dataview-demo .product-grid-item .product-price { - font-size: 1.5rem; - font-weight: 600; -} - -@media screen and (max-width: 576px) { - .dataview-demo .product-list-item { - flex-direction: column; - align-items: center; - } - - .dataview-demo .product-list-item img { - width: 75%; - margin: 2rem 0; - } - - .dataview-demo .product-list-item .product-list-detail { - text-align: center; - } - - .dataview-demo .product-list-item .product-price { - align-self: center; - } - - .dataview-demo .product-list-item .product-list-action { - display: flex; - flex-direction: column; - } - - .dataview-demo .product-list-item .product-list-action { - margin-top: 2rem; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - } -} - ` - } - }; - - return ( -
- - -
Import via Module
- - {` -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -`} - - -
Import via CDN
- - {` - - -`} - - -
Getting Started
-

- Layout of the DataView is managed by the PrimeFlex that can be downloaded from npm. -

- - - {` -npm install primeflex -`} - - -

- DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid.{' '} -

- -

- DataView has two layout modes; list and grid where itemTemplate function is called by passing the item to render along with the layout mode. -

- - {` -const itemTemplate = (data, layout) => { - if (layout === 'list') { - return ( - // List content - ); - } - - if (layout === 'grid') { - return ( - Grid Content - ); - } -} - -`} - - - - {` - -`} - - -
DataViewLayoutOptions
-

DataViewLayoutOptions is a helper component to choose between layout modes. This component is used in controlled manner to manage the state of layout orientation.

- - - {` - setLayout(e.value)} /> -`} - - -
Properties of DataViewLayoutOptions
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
layoutstringlistLayout of the items, valid values are "list" and "grid".
dataKeystringnullA property to uniquely identify an item.
styleobjectnullInline style of the element.
classNamestringnullStyle class of the element.
-
- -
Events of DataViewLayoutOptions
-
- - - - - - - - - - - - - - - -
NameParametersDescription
onChange - event.originalEvent: browser event
- event.value = layout mode e.g. "list" or "grid" - 		Callback to invoke when layout mode is changed.
-
- -
Paginator
-

- Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. Visit the paginator{' '} - paginator component for more information about the available properties. -

- -

- Pagination can either be used in Controlled or Uncontrolled manner. In controlled mode, first and onPage properties needs to be defined to control the pagination state. -

- - - {` - setFirst(e.first)}> -`} - - -

- In uncontrolled mode, only paginator property needs to be enabled. Initial page state can be still be provided using the first property in uncontrolled mode however it is evaluated at initial rendering and - ignored in further updates. If you programmatically need to update the paginator, prefer to use the component as controlled. -

- - {` - -`} - - -
Sorting
-

- sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses - a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting. -

- - - {` -const sortOptions = [ - {label: 'Price High to Low', value: '!price'}, - {label: 'Price Low to High', value: 'price'}, -]; - -const header = ( -
-
- -
-
-); - - - -`} - - - - {` -const onSortChange = (event) => { - const value = event.value; - - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } - else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } -} -`} - - -
Lazy Loading
-

- Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination in controlled mode and utilize the onPage callback to load your data from the backend. Pagination in this case - needs to display the logical number of records so bind this value to the totalRecords property so that paginator can display itself according to the total records although you'd only need to load the data of the current - page. Refer to DataTable lazy loading for a sample implementation. -

- -
Properties
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
headerJSX or stringnullHeader content of the component.
footerJSX or stringnullFooter content of the component.
valuearraynullAn array of objects to display.
layoutstringlistLayout of the items, valid values are "list" and "grid".
rowsnumbernullNumber of rows to display per page.
firstnumber0Index of the first record to render.
totalRecordsnumbernullNumber of total records, defaults to length of value when not defined.
paginatorbooleanfalseWhen specified as true, enables the pagination.
paginatorPositionstringbottomPosition of the paginator, options are "top","bottom" or "both".
alwaysShowPaginatorbooleantrueWhether to show it even there is only one page.
paginatorClassNamestringnullStyle class of the paginator element.
paginatorTemplatestring|objectFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown - Template of the paginator. For details, refer to the template section of the paginator documentation for further options. -
paginatorLeftElementnullContent for the left side of the paginator.
paginatorRightElementnullContent for the right side of the paginator.
pageLinkSizenumber5Number of page links to display.
rowsPerPageOptionsarraynullArray of integer values to display inside rows per page dropdown.
currentPageReportTemplatestring(&123;currentPage&125; of &123;totalPages&125;)Template of the current page report element.
paginatorDropdownAppendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
emptyMessagestringNo records found.Text to display when there is no data.
sortFieldstringnullName of the field to sort data by default.
sortOrdernumbernullOrder to sort the data by default.
styleobjectnullInline style of the element.
classNamestringnullStyle class of the element.
lazybooleanfalseDefines if data is loaded and interacted with in lazy manner.
gutterbooleanfalseWhether the grid structure in the container has gutter. Default value is false.
itemTemplatefunctionnullFunction that gets the option along with the layout mdoe and returns the content.
-
- -
Events
-
- - - - - - - - - - - - - - - -
NameParametersDescription
onPage - event.originalEvent: Browser event
- event.first: Index of the first records on page.
- event.rows: Number of records to display per page. - 		Callback to invoke on pagination.
-
- -
Styling
-

- Following is the list of structural style classes, for theming classes visit theming page. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-dataviewContainer element.
p-dataview-listContainer element in list layout.
p-dataview-gridContainer element in grid layout.
p-dataview-headerHeader section.
p-dataview-footerFooter section.
p-dataview-contentContainer of items.
-
- -
Accessibility
- -
Screen Reader
-

- The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe - the buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively. -

- -

- Refer to paginator accessibility documentation for the paginator of the component. -

- -
Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the buttons.
- space - Toggles the checked state of a button.
-
- - -
Dependencies
-

None.

- - - {useLiveEditorTabs({ name: 'DataViewDemo', sources: sources, service: 'ProductService', data: 'products', extFiles: extFiles })} - -
- ); -}); - -export default DataViewDoc; diff --git a/components/doc/dataview/lazydoc.js b/components/doc/dataview/lazydoc.js new file mode 100644 index 0000000000..08e3c3cb34 --- /dev/null +++ b/components/doc/dataview/lazydoc.js @@ -0,0 +1,410 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { DataView, DataViewLayoutOptions } from '../../lib/dataview/DataView'; +import { Button } from '../../lib/button/Button'; +import { Rating } from '../../lib/rating/Rating'; +import { ProductService } from '../../../service/ProductService'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function LazyDataViewDoc(props) { + const [products, setProducts] = useState(null); + const [layout, setLayout] = useState('grid'); + const [loading, setLoading] = useState(true); + const [first, setFirst] = useState(0); + const [totalRecords, setTotalRecords] = useState(0); + const rows = useRef(6); + const datasource = useRef(null); + const isMounted = useRef(false); + const productService = new ProductService(); + + useEffect(() => { + if (isMounted.current) { + setTimeout(() => { + setLoading(false); + }, 1000); + } + }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps + + useEffect(() => { + setTimeout(() => { + isMounted.current = true; + productService.getProducts().then((data) => { + datasource.current = data; + setTotalRecords(data.length); + setProducts(datasource.current.slice(0, rows.current)); + setLoading(false); + }); + }, 1000); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const onPage = (event) => { + setLoading(true); + + //imitate delay of a backend call + setTimeout(() => { + const startIndex = event.first; + const endIndex = Math.min(event.first + rows.current, totalRecords - 1); + const newProducts = startIndex === endIndex ? datasource.current.slice(startIndex) : datasource.current.slice(startIndex, endIndex); + + setFirst(startIndex); + setProducts(newProducts); + setLoading(false); + }, 1000); + }; + + const renderListItem = (data) => { + return ( +
+
+ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> +
+
{data.name}
+
{data.description}
+ + + {data.category} +
+
+ ${data.price} + + {data.inventoryStatus} +
+
+
+ ); + }; + + const renderGridItem = (data) => { + return ( +
+
+
+
+ + {data.category} +
+ {data.inventoryStatus} +
+
+ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> +
{data.name}
+
{data.description}
+ +
+
+ ${data.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') return renderListItem(product); + else if (layout === 'grid') return renderGridItem(product); + }; + + const renderHeader = () => { + let onOptionChange = (e) => { + setLoading(true); + setLayout(e.value); + }; + + return ( +
+ +
+ ); + }; + + const header = renderHeader(); + + const code = { + basic: ` + + `, + javascript: ` +import React, { useState, useEffect, useRef } from 'react'; +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; +import { Button } from 'primereact/button'; +import { ProductService } from '../service/ProductService'; +import { Rating } from 'primereact/rating'; + +export default function LazyDataViewDoc() { + const [products, setProducts] = useState(null); + const [layout, setLayout] = useState('grid'); + const [loading, setLoading] = useState(true); + const [first, setFirst] = useState(0); + const [totalRecords, setTotalRecords] = useState(0); + const rows = useRef(6); + const datasource = useRef(null); + const isMounted = useRef(false); + const productService = new ProductService(); + + useEffect(() => { + if (isMounted.current) { + setTimeout(() => { + setLoading(false); + }, 1000); + } + }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps + + useEffect(() => { + setTimeout(() => { + isMounted.current = true; + productService.getProducts().then(data => { + datasource.current = data; + setTotalRecords(data.length); + setProducts(datasource.current.slice(0, rows.current)); + setLoading(false); + }); + }, 1000); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const onPage = (event) => { + setLoading(true); + + //imitate delay of a backend call + setTimeout(() => { + const startIndex = event.first; + const endIndex = Math.min(event.first + rows.current, totalRecords - 1); + const newProducts = startIndex === endIndex ? datasource.current.slice(startIndex) : datasource.current.slice(startIndex, endIndex); + + setFirst(startIndex); + setProducts(newProducts); + setLoading(false); + }, 1000); + } + const renderListItem = (data) => { + return ( +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
+
{data.name}
+
{data.description}
+ + + {data.category} +
+
+ \${data.price} + + {data.inventoryStatus} +
+
+
+ ); + }; + + const renderGridItem = (data) => { + return ( +
+
+
+
+ + {data.category} +
+ {data.inventoryStatus} +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
{data.name}
+
{data.description}
+ +
+
+ \${data.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') + return renderListItem(product); + else if (layout === 'grid') + return renderGridItem(product); + } + + const renderHeader = () => { + let onOptionChange = (e) => { + setLoading(true); + setLayout(e.value); + }; + + return ( +
+ +
+ ); + } + + const header = renderHeader(); + + return ( + + ) +} + `, + typescript: ` +import React, { useState, useEffect, useRef } from 'react'; +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; +import { Button } from 'primereact/button'; +import { ProductService } from '../service/ProductService'; +import { Rating } from 'primereact/rating'; + +export default function LazyDataViewDoc() { + const [products, setProducts] = useState(null); + const [layout, setLayout] = useState('grid'); + const [loading, setLoading] = useState(true); + const [first, setFirst] = useState(0); + const [totalRecords, setTotalRecords] = useState(0); + const rows = useRef(6); + const datasource = useRef(null); + const isMounted = useRef(false); + const productService = new ProductService(); + + useEffect(() => { + if (isMounted.current) { + setTimeout(() => { + setLoading(false); + }, 1000); + } + }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps + + useEffect(() => { + setTimeout(() => { + isMounted.current = true; + productService.getProducts().then(data => { + datasource.current = data; + setTotalRecords(data.length); + setProducts(datasource.current.slice(0, rows.current)); + setLoading(false); + }); + }, 1000); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const onPage = (event) => { + setLoading(true); + + //imitate delay of a backend call + setTimeout(() => { + const startIndex = event.first; + const endIndex = Math.min(event.first + rows.current, totalRecords - 1); + const newProducts = startIndex === endIndex ? datasource.current.slice(startIndex) : datasource.current.slice(startIndex, endIndex); + + setFirst(startIndex); + setProducts(newProducts); + setLoading(false); + }, 1000); + } + const renderListItem = (data) => { + return ( +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
+
{data.name}
+
{data.description}
+ + + {data.category} +
+
+ \${data.price} + + {data.inventoryStatus} +
+
+
+ ); + }; + + const renderGridItem = (data) => { + return ( +
+
+
+
+ + {data.category} +
+ {data.inventoryStatus} +
+
+ e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> +
{data.name}
+
{data.description}
+ +
+
+ \${data.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') + return renderListItem(product); + else if (layout === 'grid') + return renderGridItem(product); + } + + const renderHeader = () => { + let onOptionChange = (e) => { + setLoading(true); + setLayout(e.value); + }; + + return ( +
+ +
+ ); + } + + const header = renderHeader(); + + return ( + + ) +} + ` + }; + + return ( + <> + +

+ Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates lazy + paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming there are actually + records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist. +

+ +
+ +
+ + + ); +} diff --git a/components/layout/menu.json b/components/layout/menu.json index 4fbb769b40..984e1bd0b8 100644 --- a/components/layout/menu.json +++ b/components/layout/menu.json @@ -516,14 +516,9 @@ "meta": ["dataview"], "children": [ { - "name": "Documentation", + "name": "DataViews", "to": "/dataview", - "meta": ["documentation"] - }, - { - "name": "Lazy", - "to": "/dataview/lazy", - "meta": ["lazy"] + "meta": ["dataviews"] } ] }, diff --git a/pages/dataview/index.js b/pages/dataview/index.js index 39e6ef43b6..1359684c1e 100644 --- a/pages/dataview/index.js +++ b/pages/dataview/index.js @@ -1,117 +1,73 @@ -import React, { useState, useEffect } from 'react'; -import { DataView, DataViewLayoutOptions } from '../../components/lib/dataview/DataView'; -import { Button } from '../../components/lib/button/Button'; -import { Dropdown } from '../../components/lib/dropdown/Dropdown'; -import { ProductService } from '../../service/ProductService'; -import { Rating } from '../../components/lib/rating/Rating'; -import DataViewDoc from '../../components/doc/dataview'; -import { DocActions } from '../../components/doc/common/docactions'; import Head from 'next/head'; -import getConfig from 'next/config'; +import { DocSections } from '../../components/doc/common/docsections'; +import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { ImportDoc } from '../../components/doc/dataview/importdoc'; +import { BasicDoc } from '../../components/doc/dataview/basicdoc'; +import { ApiDoc } from '../../components/doc/dataview/apidoc'; +import { LazyDataViewDoc } from '../../components/doc/dataview/lazydoc'; const DataViewDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [sortKey, setSortKey] = useState(null); - const [sortOrder, setSortOrder] = useState(null); - const [sortField, setSortField] = useState(null); - const sortOptions = [ - { label: 'Price High to Low', value: '!price' }, - { label: 'Price Low to High', value: 'price' } - ]; - - const productService = new ProductService(); - const contextPath = getConfig().publicRuntimeConfig.contextPath; - - useEffect(() => { - productService.getProducts().then((data) => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onSortChange = (event) => { - const value = event.value; - - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } - }; - - const renderListItem = (data) => { - return ( -
-
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - - {data.category} -
-
- ${data.price} - - {data.inventoryStatus} -
-
-
- ); - }; - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- ${data.price} - -
-
-
- ); - }; - - const itemTemplate = (product, layout) => { - if (!product) { - return; + const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'lazy', + label: 'Lazy', + component: LazyDataViewDoc + }, + { + id: 'api', + label: 'API', + component: ApiDoc, + children: [ + { + id: 'propertiesofdataviewlayout', + label: 'Properties of DataViewLayoutOptions' + }, + { + id: 'eventsofdataview', + label: 'Events of DataViewLayoutOptions' + }, + { + id: 'paginator', + label: 'Paginator' + }, + { + id: 'sorting', + label: 'Sorting' + }, + { + id: 'lazyloading', + label: 'Lazy Loading' + }, + { + id: 'properties', + label: 'Properties' + }, + { + id: 'events', + label: 'Events' + }, + { + id: 'styling', + label: 'Styling' + }, + { + id: 'accessibility', + label: 'Accessibility' + } + ] } - - if (layout === 'list') return renderListItem(product); - else if (layout === 'grid') return renderGridItem(product); - }; - - const renderHeader = () => { - return ( -
-
- -
-
- setLayout(e.value)} /> -
-
- ); - }; - - const header = renderHeader(); + ]; return (
@@ -128,13 +84,10 @@ const DataViewDemo = () => {
-
-
- -
+
+ +
- -
); }; diff --git a/pages/dataview/lazy.js b/pages/dataview/lazy.js deleted file mode 100644 index e8314e2d37..0000000000 --- a/pages/dataview/lazy.js +++ /dev/null @@ -1,887 +0,0 @@ -import React, { useState, useEffect, useRef, memo } from 'react'; -import { DataView, DataViewLayoutOptions } from '../../components/lib/dataview/DataView'; -import { TabView } from '../../components/lib/tabview/TabView'; -import { useLiveEditorTabs } from '../../components/doc/common/liveeditor'; -import { ProductService } from '../../service/ProductService'; -import { Rating } from '../../components/lib/rating/Rating'; -import { Button } from '../../components/lib/button/Button'; -import { DocActions } from '../../components/doc/common/docactions'; -import Head from 'next/head'; -import getConfig from 'next/config'; - -const DataViewLazyDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [loading, setLoading] = useState(true); - const [first, setFirst] = useState(0); - const [totalRecords, setTotalRecords] = useState(0); - const rows = useRef(6); - const datasource = useRef(null); - const isMounted = useRef(false); - const productService = new ProductService(); - const contextPath = getConfig().publicRuntimeConfig.contextPath; - - useEffect(() => { - if (isMounted.current) { - setTimeout(() => { - setLoading(false); - }, 1000); - } - }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - setTimeout(() => { - isMounted.current = true; - productService.getProducts().then((data) => { - datasource.current = data; - setTotalRecords(data.length); - setProducts(datasource.current.slice(0, rows.current)); - setLoading(false); - }); - }, 1000); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onPage = (event) => { - setLoading(true); - - //imitate delay of a backend call - setTimeout(() => { - const startIndex = event.first; - const endIndex = Math.min(event.first + rows.current, totalRecords - 1); - const newProducts = startIndex === endIndex ? datasource.current.slice(startIndex) : datasource.current.slice(startIndex, endIndex); - - setFirst(startIndex); - setProducts(newProducts); - setLoading(false); - }, 1000); - }; - - const renderListItem = (data) => { - return ( -
-
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - - {data.category} -
-
- ${data.price} - - {data.inventoryStatus} -
-
-
- ); - }; - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- ${data.price} - -
-
-
- ); - }; - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') return renderListItem(product); - else if (layout === 'grid') return renderGridItem(product); - }; - - const renderHeader = () => { - let onOptionChange = (e) => { - setLoading(true); - setLayout(e.value); - }; - - return ( -
- -
- ); - }; - - const header = renderHeader(); - - return ( -
- - React DataView Component - Lazy - - -
-
-

- DataView Lazy -

-

- Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates - lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming there are - actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist. -

-
- - -
- -
-
- -
-
- - -
- ); -}; - -export default DataViewLazyDemo; - -export const DataViewLazyDemoDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { ProductService } from '../service/ProductService'; -import { Rating } from 'primereact/rating'; -import { Button } from 'primereact/button'; -import './DataViewDemo.css'; - -export class DataViewLazyDemo extends Component { - - constructor(props) { - super(props); - this.state = { - products: null, - layout: 'grid', - loading: true, - first: 0, - totalRecords: 0 - }; - this.rows = 6; - - this.productService = new ProductService(); - this.itemTemplate = this.itemTemplate.bind(this); - this.onPage = this.onPage.bind(this); - } - - componentDidMount() { - setTimeout(() => { - this.productService.getProducts().then(data => { - this.datasource = data; - this.setState({ - totalRecords: data.length, - products: this.datasource.slice(0, this.rows), - loading: false - }); - }); - }, 1000); - } - - onPage(event) { - this.setState({ - loading: true - }); - - //imitate delay of a backend call - setTimeout(() => { - const startIndex = event.first; - const endIndex = Math.min(event.first + this.rows, this.state.totalRecords - 1); - const newProducts = startIndex === endIndex ? this.datasource.slice(startIndex) : this.datasource.slice(startIndex, endIndex); - - this.setState({ - first: startIndex, - products: newProducts, - loading: false - }); - }, 1000); - } - - renderListItem(data) { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - renderGridItem(data) { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - itemTemplate(product, layout) { - if (!product) { - return; - } - - if (layout === 'list') - return this.renderListItem(product); - else if (layout === 'grid') - return this.renderGridItem(product); - } - - renderHeader() { - let onOptionChange = (e) => { - this.setState({ loading: true }, () => { - setTimeout(() => { - this.setState({ - loading: false, - layout: e.value - }); - }, 1000); - }); - }; - - return ( -
- -
- ); - } - - render() { - const header = this.renderHeader(); - - return ( -
-
- -
-
- ); - } -} - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useState, useEffect, useRef } from 'react'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { ProductService } from '../service/ProductService'; -import { Rating } from 'primereact/rating'; -import { Button } from 'primereact/button'; -import './DataViewDemo.css'; - -const DataViewLazyDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [loading, setLoading] = useState(true); - const [first, setFirst] = useState(0); - const [totalRecords, setTotalRecords] = useState(0); - const rows = useRef(6); - const datasource = useRef(null); - const isMounted = useRef(false); - const productService = new ProductService(); - - useEffect(() => { - if (isMounted.current) { - setTimeout(() => { - setLoading(false); - }, 1000); - } - }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - setTimeout(() => { - isMounted.current = true; - productService.getProducts().then(data => { - datasource.current = data; - setTotalRecords(data.length); - setProducts(datasource.current.slice(0, rows.current)); - setLoading(false); - }); - }, 1000); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onPage = (event) => { - setLoading(true); - - //imitate delay of a backend call - setTimeout(() => { - const startIndex = event.first; - const endIndex = Math.min(event.first + rows.current, totalRecords - 1); - const newProducts = startIndex === endIndex ? datasource.current.slice(startIndex) : datasource.current.slice(startIndex, endIndex); - - setFirst(startIndex); - setProducts(newProducts); - setLoading(false); - }, 1000); - } - - const renderListItem = (data) => { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') - return renderListItem(product); - else if (layout === 'grid') - return renderGridItem(product); - } - - const renderHeader = () => { - let onOptionChange = (e) => { - setLoading(true); - setLayout(e.value); - }; - - return ( -
- -
- ); - } - - const header = renderHeader(); - - return ( -
-
- -
-
- ); -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useState, useEffect, useRef } from 'react'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { ProductService } from '../service/ProductService'; -import { Rating } from 'primereact/rating'; -import { Button } from 'primereact/button'; -import './DataViewDemo.css'; - -const DataViewLazyDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [loading, setLoading] = useState(true); - const [first, setFirst] = useState(0); - const [totalRecords, setTotalRecords] = useState(0); - const rows = useRef(6); - const datasource = useRef(null); - const isMounted = useRef(false); - const productService = new ProductService(); - - useEffect(() => { - if (isMounted.current) { - setTimeout(() => { - setLoading(false); - }, 1000); - } - }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - setTimeout(() => { - isMounted.current = true; - productService.getProducts().then(data => { - datasource.current = data; - setTotalRecords(data.length); - setProducts(datasource.current.slice(0, rows.current)); - setLoading(false); - }); - }, 1000); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onPage = (event) => { - setLoading(true); - - //imitate delay of a backend call - setTimeout(() => { - const startIndex = event.first; - const endIndex = Math.min(event.first + rows.current, totalRecords - 1); - const newProducts = startIndex === endIndex ? datasource.slice(startIndex) : datasource.slice(startIndex, endIndex); - - setFirst(startIndex); - setProducts(newProducts); - setLoading(false); - }, 1000); - } - - const renderListItem = (data) => { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') - return renderListItem(product); - else if (layout === 'grid') - return renderGridItem(product); - } - - const renderHeader = () => { - let onOptionChange = (e) => { - setLoading(true); - setLayout(e.value); - }; - - return ( -
- -
- ); - } - - const header = renderHeader(); - - return ( -
-
- -
-
- ); -} - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - - - - - - - -`, - content: ` -const { useEffect, useState, useRef } = React; -const { DataView, DataViewLayoutOptions } = primereact.dataview; -const { Button } = primereact.button; -const { Rating } = primereact.rating; - -const DataViewLazyDemo = () => { - const [products, setProducts] = useState(null); - const [layout, setLayout] = useState('grid'); - const [loading, setLoading] = useState(true); - const [first, setFirst] = useState(0); - const [totalRecords, setTotalRecords] = useState(0); - const rows = useRef(6); - const datasource = useRef(null); - const isMounted = useRef(false); - const productService = new ProductService(); - - useEffect(() => { - if (isMounted.current) { - setTimeout(() => { - setLoading(false); - }, 1000); - } - }, [loading]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - setTimeout(() => { - isMounted.current = true; - productService.getProducts().then(data => { - datasource.current = data; - setTotalRecords(data.length); - setProducts(datasource.current.slice(0, rows.current)); - setLoading(false); - }); - }, 1000); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onPage = (event) => { - setLoading(true); - - //imitate delay of a backend call - setTimeout(() => { - const startIndex = event.first; - const endIndex = Math.min(event.first + rows.current, totalRecords - 1); - const newProducts = startIndex === endIndex ? datasource.slice(startIndex) : datasource.slice(startIndex, endIndex); - - setFirst(startIndex); - setProducts(newProducts); - setLoading(false); - }, 1000); - } - - const renderListItem = (data) => { - return ( -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
-
{data.name}
-
{data.description}
- - {data.category} -
-
- \${data.price} - - {data.inventoryStatus} -
-
-
- ); - } - - const renderGridItem = (data) => { - return ( -
-
-
-
- - {data.category} -
- {data.inventoryStatus} -
-
- e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> -
{data.name}
-
{data.description}
- -
-
- \${data.price} - -
-
-
- ); - } - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') - return renderListItem(product); - else if (layout === 'grid') - return renderGridItem(product); - } - - const renderHeader = () => { - let onOptionChange = (e) => { - setLoading(true); - setLayout(e.value); - }; - - return ( -
- -
- ); - } - - const header = renderHeader(); - - return ( -
-
- -
-
- ); -} - ` - } - }; - - const extFiles = { - 'demo/DataViewDemo.css': { - content: ` -.dataview-demo .p-dropdown { - width: 14rem; - font-weight: normal; -} - -.dataview-demo .product-name { - font-size: 1.5rem; - font-weight: 700; -} - -.dataview-demo .product-description { - margin: 0 0 1rem 0; -} - -.dataview-demo .product-category-icon { - vertical-align: middle; - margin-right: .5rem; -} - -.dataview-demo .product-category { - font-weight: 600; - vertical-align: middle; -} - -.dataview-demo .product-list-item { - display: flex; - align-items: center; - padding: 1rem; - width: 100%; -} - -.dataview-demo .product-list-item img { - width: 150px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - margin-right: 2rem; -} - -.dataview-demo .product-list-item .product-list-detail { - flex: 1 1 0; -} - -.dataview-demo .product-list-item .p-rating { - margin: 0 0 .5rem 0; -} - -.dataview-demo .product-list-item .product-price { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: .5rem; - align-self: flex-end; -} - -.dataview-demo .product-list-item .product-list-action { - display: flex; - flex-direction: column; -} - -.dataview-demo .product-list-item .p-button { - margin-bottom: .5rem; -} - -.dataview-demo .product-grid-item { - margin: .5em; - border: 1px solid #dee2e6; - padding: 2rem; -} - -.dataview-demo .product-grid-item .product-grid-item-top, - .dataview-demo .product-grid-item .product-grid-item-bottom { - display: flex; - align-items: center; - justify-content: space-between; -} - -.dataview-demo .product-grid-item img { - width: 75%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - margin: 2rem 0; -} - -.dataview-demo .product-grid-item .product-grid-item-content { - text-align: center; -} - -.dataview-demo .product-grid-item .product-price { - font-size: 1.5rem; - font-weight: 600; -} - -@media screen and (max-width: 576px) { - .dataview-demo .product-list-item { - flex-direction: column; - align-items: center; - } - - .dataview-demo .product-list-item img { - width: 75%; - margin: 2rem 0; - } - - .dataview-demo .product-list-item .product-list-detail { - text-align: center; - } - - .dataview-demo .product-list-item .product-price { - align-self: center; - } - - .dataview-demo .product-list-item .product-list-action { - display: flex; - flex-direction: column; - } - - .dataview-demo .product-list-item .product-list-action { - margin-top: 2rem; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - } -} - ` - } - }; - - return ( -
- {useLiveEditorTabs({ name: 'DataViewLazyDemo', sources: sources, service: 'ProductService', data: 'products', extFiles: extFiles })} -
- ); -});