DataList

A infinite-scrollable list that supports paging in of items

Installation

import { DataList } from 'uxp/components';

Signature

const DataList: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<IDataListInstanceProps> & IDataListProps>>

Examples

Using array

 let data:any[] = [
     {
         "id": 1,
         "name": "Name 01"
     },
     {
         "id": 2,
         "name": "Name 01"
     },
     {
         "id": 3,
         "name": "Name 01"
     }
 ]

 function renderItem(item:any, key:number) {
     return <div>
         <div>{item.name} </div>
     </div>
 }

 <DataList
     data={data}
     renderItem={(item, key) => renderItem(item, key)}
     pageSize={10}
 />

Using IDataFunction
 async function getData(max:number, last: string, args: any) {
     if(!last) last = "0";

     return new Promise<{items:any[], pageToken: string}>((done, nope) =>{
         executeAction("model", "action", {max: max, last: last, args: args})
         .then(res => {
             done({items: res.data, pageToken: res.lastPageToken })
         })
         .catch(e => {
             done({items: [], pageToken: last})
         })
     })
 }

 function renderItem(item:any, key:number) {
     return <div>
         <div>{item.name} </div>
     </div>
 }

 <DataList
     data={(max, last, args) => getData(max, last, args)}
     renderItem={(item, key) => renderItem(item, key)}
     pageSize={10}
 />

Using other props

 <DataList
     data={data}
     renderItem={(item, key) => renderItem(item, key)}
     pageSize={10}
     className="custom-css-class"
     showFooter={false}
     showEndOfContent={false}
 />

Properties

Name	Type	Mandatory	Default Value	Example Value
data	Array | IDataFunction	Yes	-	-
renderItem	(item: any, key: number) => JSX.Element	Yes	-	*
pageSize	number	Yes	-	-
args	any	No	-	-
renderLoading	() => JSX.Element	No	-	-
className	string	No	-	-
showFooter	boolean	No	-	-
scrollStep	number	No	-	-
showEndOfContent	boolean	No	-	-
onItemsLoad	(total: number, loaded: number, items?: any[]) => void	No	-	-
renderNoItems	() => JSX.Element	No	-	-

Ref Handlers

Available methods through ref:

Method	Type	Description
updateItem	(key: number, item: any) => void	-
removeItem	(key: number) => void	-