Listing: add props page and rowsPerPage

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

src/Listing/index.tsx

@@ -30,6 +30,8 @@ type Props = {
   hasLoader?: boolean;
   data: Record<string, any>[];
   headers: Header[];
+  page?: number;
+  rowsPerPage?: number;
   toolbarContent?: React.ReactNode;
   onUpdateSelection?: (...args: any[]) => any;
   onClick?: (...args: any[]) => any;
@@ -42,11 +44,13 @@ const Listing: FunctionComponent<Props> = ({
   order: orderProp,
   headers,
   onUpdateSelection,
+  page: pageProp = 0,
+  rowsPerPage: rowsPerPageProp = 10,
   ...rest
 }) => {
   const node = useRef<any>();
-  const [page, setPage] = useState<number>(0);
-  const [rowsPerPage, setRowsPerPage] = useState<number>(10);
+  const [page, setPage] = useState<number>(pageProp);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(rowsPerPageProp);
   const [selected, setSelected] = useState<string[]>([]);
   const [order, setOrder] = useState<"asc" | "desc">(orderProp || "asc");
   const [orderBy, setOrderBy] = useState<string>(orderByProp || "id");