// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles, TablePagination, Table, IconButton } from '@material-ui/core';
+import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles, TablePagination, IconButton } from '@material-ui/core';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import ContextMenu, { ContextMenuActionGroup, ContextMenuAction } from "../../components/context-menu/context-menu";
import ColumnSelector from "../../components/column-selector/column-selector";
import DataTable from "../../components/data-table/data-table";
import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
-import { DataColumn, toggleSortDirection } from "../../components/data-table/data-column";
+import { DataColumn } from "../../components/data-table/data-column";
import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
import SearchInput from '../search-input/search-input';
onActionClick={this.callAction}
onClose={this.closeContextMenu} />
<Toolbar className={this.props.classes.toolbar}>
- {this.props.items.length > 0 &&
- <Grid container justify="space-between" wrap="nowrap" alignItems="center">
- <div className={this.props.classes.searchBox}>
- <SearchInput
- value={this.props.searchValue}
- onSearch={this.props.onSearch} />
- </div>
- <ColumnSelector
- columns={this.props.columns}
- onColumnToggle={this.props.onColumnToggle} />
- </Grid>}
-
+ <Grid container justify="space-between" wrap="nowrap" alignItems="center">
+ <div className={this.props.classes.searchBox}>
+ {this.props.items.length > 0 && <SearchInput
+ value={this.props.searchValue}
+ onSearch={this.props.onSearch} />}
+ </div>
+ <ColumnSelector
+ columns={this.props.columns}
+ onColumnToggle={this.props.onColumnToggle} />
+ </Grid>
</Toolbar>
<DataTable
columns={[
selected: true,
key: "context-actions",
renderHeader: () => null,
- render: this.renderContextMenuTrigger
+ render: this.renderContextMenuTrigger,
+ width: "auto"
};
}
expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
});
- it("shows information that items array is empty", () => {
- const columns: Array<DataColumn<string>> = [
- {
- name: "Column 1",
- render: () => <span />,
- selected: true
- }
- ];
- const dataTable = mount(<DataTable
- columns={columns}
- items={[]}
- onFiltersChange={jest.fn()}
- onRowClick={jest.fn()}
- onRowContextMenu={jest.fn()}
- onSortToggle={jest.fn()} />);
- expect(dataTable.find(Typography).text()).toBe("No items");
- });
-
it("renders items", () => {
const columns: Array<DataColumn<string>> = [
{
render() {
const { items, classes } = this.props;
return <div className={classes.tableContainer}>
- {items.length > 0 ?
- <Table>
- <TableHead>
- <TableRow>
- {this.mapVisibleColumns(this.renderHeadCell)}
- </TableRow>
- </TableHead>
- <TableBody className={classes.tableBody}>
- {items.map(this.renderBodyRow)}
- </TableBody>
- </Table> : <Typography
- className={classes.noItemsInfo}
- variant="body2"
- gutterBottom>
- No items
- </Typography>}
+ <Table>
+ <TableHead>
+ <TableRow>
+ {this.mapVisibleColumns(this.renderHeadCell)}
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {items.map(this.renderBodyRow)}
+ </TableBody>
+ </Table>
</div>;
}
renderHeadCell = (column: DataColumn<T>, index: number) => {
const { name, key, renderHeader, filters, sortDirection } = column;
const { onSortToggle, onFiltersChange } = this.props;
- return <TableCell key={key || index}>
+ return <TableCell key={key || index} style={{width: column.width, minWidth: column.width}}>
{renderHeader ?
renderHeader() :
filters
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
tableContainer: {
- overflowX: 'auto'
+ overflowX: 'auto',
+ overflowY: 'hidden'
},
tableBody: {
background: theme.palette.background.paper
name: "Name",
selected: true,
sortDirection: "asc",
- render: renderName
+ render: renderName,
+ width: "450px"
}, {
name: "Status",
selected: true,
name: "Complete",
selected: true
}],
- render: renderStatus
+ render: renderStatus,
+ width: "75px"
}, {
name: "Type",
selected: true,
name: "Group",
selected: true
}],
- render: item => renderType(item.kind)
+ render: item => renderType(item.kind),
+ width: "125px"
}, {
name: "Owner",
selected: true,
- render: item => renderOwner(item.owner)
+ render: item => renderOwner(item.owner),
+ width: "200px"
}, {
name: "File size",
selected: true,
sortDirection: "none",
- render: item => renderFileSize(item.fileSize)
+ render: item => renderFileSize(item.fileSize),
+ width: "50px"
}, {
name: "Last modified",
selected: true,
- render: item => renderDate(item.lastModified)
+ render: item => renderDate(item.lastModified),
+ width: "150px"
}]
};