//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
+import React from 'react';
+import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton, CircularProgress } from '@material-ui/core';
import classnames from 'classnames';
import { DataColumn, SortDirection } from './data-column';
import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
-import { countNodes } from '~/models/tree';
+import { countNodes } from 'models/tree';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
currentRoute?: string;
}
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows';
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
- overflowX: 'auto',
- overflowY: 'auto',
- height: 'calc(100vh - 280px)',
+ width: '100%',
},
content: {
display: 'inline-block',
- width: '100%'
+ width: '100%',
},
tableBody: {
background: theme.palette.background.paper
},
+ loader: {
+ top: '50%',
+ left: '50%',
+ marginTop: '-15px',
+ marginLeft: '-15px',
+ position: 'absolute'
+ },
noItemsInfo: {
textAlign: "center",
padding: theme.spacing.unit
</TableRow>
</TableHead>
<TableBody className={classes.tableBody}>
- {items.map(this.renderBodyRow)}
+ {
+ this.props.working ?
+ <div>
+ <CircularProgress className={classes.loader} size={30} />
+ </div> :
+ items.map(this.renderBodyRow)
+ }
</TableBody>
</Table>
{items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}