diff --git a/README.md b/README.md index dc5fa6e..4f5b67f 100644 --- a/README.md +++ b/README.md @@ -328,6 +328,8 @@ Data-Table to display data. - `data: any[]`, data to display in table - `order?: ENUM(asc | desc)`, direction in which to sort values, default `asc` - `orderBy: string`, field name to use for sorting the table +- `page?: number`, page to show in current listing, default `0` +- `rowsPerPage?: number`, number of rows per page to show, default `10` - `hasLoader?: boolean`, should a loader be displayed in table, default `false` - `renderToolbarContent?: (selected) => ReactElement | null`, content to show in the toolbar (visible if content column is selected) - `onUpdateSelection: function`, is called if a selection of a line is changed diff --git a/src/Listing/index.tsx b/src/Listing/index.tsx index 1ee2cb2..2f118c9 100644 --- a/src/Listing/index.tsx +++ b/src/Listing/index.tsx @@ -30,6 +30,8 @@ type Props = { hasLoader?: boolean; data: Record[]; headers: Header[]; + page?: number; + rowsPerPage?: number; toolbarContent?: React.ReactNode; onUpdateSelection?: (...args: any[]) => any; onClick?: (...args: any[]) => any; @@ -42,11 +44,13 @@ const Listing: FunctionComponent = ({ order: orderProp, headers, onUpdateSelection, + page: pageProp = 0, + rowsPerPage: rowsPerPageProp = 10, ...rest }) => { const node = useRef(); - const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(10); + const [page, setPage] = useState(pageProp); + const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp); const [selected, setSelected] = useState([]); const [order, setOrder] = useState<"asc" | "desc">(orderProp || "asc"); const [orderBy, setOrderBy] = useState(orderByProp || "id");