DataTable

A infinite-scrollable list that supports paging in of items

Installation

import { DataTable } from 'uxp/components';

Signature

const DataTable: React.FunctionComponent<IDataTableProps>

Examples

<DataTable
     data={(max, last) => getDataItems(max, last)}
     pageSize={10}
     columns={[
         {
             title: "Request",
             width: "30%",
             renderColumn: (item) => <ItemCard
                 item={item}
                 subTitleField="request"
                 className="data-table-item"
             />
         },
         {
             title: "User",
             width: "25%",
             renderColumn: (item) => <ItemCard
                 item={item}
                 subTitleField="user"
                 className="data-table-item"
             />
         },
         {
             title: "Zone",
             width: "15%",
             renderColumn: (item) => <ItemCard
                 item={item}
                 subTitleField="section"
                 className="data-table-item"
             />
         },
         {
             title: "Status",
             width: "15%",
             renderColumn: (item) => <ItemCard
                 item={item}
                 subTitleField="status"
                 className="data-table-item"
             />
         },
         {
             title: "Date",
             width: "15%",
             renderColumn: (item) => <ItemCard
                 item={item}
                 subTitleField="date"
                 className="data-table-item"
             />
         }
     ]}
 />

Properties

Name	Type	Mandatory	Default Value	Example Value
data	Array | IDataFunction	Yes	-	-
columns	IDataTableColumn[]	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) => void	No	-	-
renderHeaders	boolean	No	-	-
onClickRow	(item: any) => void	No	-	-
activeClass	string	No	-	-

Related Types

• IDataTableProps

• IDataFunction

• IDataTableColumn

• ITitleFunc