Add pagination to data explorer

[arvados.git] / src / views-components / project-explorer / project-explorer.tsx

diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
index 4757440cc0d9757f8c362bb84ffaf86f74701ad1..4931c09a5149b67c1b3f5b300a6bf3b8798da093 100644 (file)
--- a/src/views-components/project-explorer/project-explorer.tsx
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -28,11 +28,15 @@ interface ProjectExplorerProps {
 interface ProjectExplorerState {
     columns: Array<DataColumn<ProjectExplorerItem>>;
     searchValue: string;
+    page: number;
+    rowsPerPage: number;
 }
 
 class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
     state: ProjectExplorerState = {
         searchValue: "",
+        page: 0,
+        rowsPerPage: 10,
         columns: [{
             name: "Name",
             selected: true,
@@ -106,12 +110,16 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
             columns={this.state.columns}
             contextActions={this.contextMenuActions}
             searchValue={this.state.searchValue}
+            page={this.state.page}
+            rowsPerPage={this.state.rowsPerPage}
             onColumnToggle={this.toggleColumn}
             onFiltersChange={this.changeFilters}
             onRowClick={console.log}
             onSortToggle={this.toggleSort}
             onSearch={this.search}
-            onContextAction={this.executeAction} />;
+            onContextAction={this.executeAction}
+            onChangePage={this.changePage}
+            onChangeRowsPerPage={this.changeRowsPerPage} />;
     }
 
     toggleColumn = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
@@ -151,6 +159,14 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
     search = (searchValue: string) => {
         this.setState({ searchValue });
     }
+
+    changePage = (page: number) => {
+        this.setState({ page });
+    }
+
+    changeRowsPerPage = (rowsPerPage: number) => {
+        this.setState({ rowsPerPage });
+    }
 }
 
 const renderName = (item: ProjectExplorerItem) =>