projects
/
arvados.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
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>>;
interface ProjectExplorerState {
columns: Array<DataColumn<ProjectExplorerItem>>;
+ searchValue: string;
+ page: number;
+ rowsPerPage: number;
}
class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
state: ProjectExplorerState = {
}
class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
state: ProjectExplorerState = {
+ searchValue: "",
+ page: 0,
+ rowsPerPage: 10,
columns: [{
name: "Name",
selected: true,
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}
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}
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>) => {
}
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}`);
}
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) =>
}
const renderName = (item: ProjectExplorerItem) =>