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 3fac6df6902d3e1393da506fcc0d0c8ce2dc7054..4931c09a5149b67c1b3f5b300a6bf3b8798da093 100644 (file)
--- a/src/views-components/project-explorer/project-explorer.tsx
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -27,10 +27,16 @@ 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,
@@ -103,11 +109,17 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
             items={this.props.items}
             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}
-            onContextAction={this.executeAction} />;
+            onSearch={this.search}
+            onContextAction={this.executeAction}
+            onChangePage={this.changePage}
+            onChangeRowsPerPage={this.changeRowsPerPage} />;
     }
 
     toggleColumn = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
@@ -143,6 +155,18 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
     executeAction = (action: ContextMenuAction, item: ProjectExplorerItem) => {
         alert(`Executing ${action.name} on ${item.name}`);
     }
+
+    search = (searchValue: string) => {
+        this.setState({ searchValue });
+    }
+
+    changePage = (page: number) => {
+        this.setState({ page });
+    }
+
+    changeRowsPerPage = (rowsPerPage: number) => {
+        this.setState({ rowsPerPage });
+    }
 }
 
 const renderName = (item: ProjectExplorerItem) =>