diff --git a/webapp/src/components/tableComponent.scss b/webapp/src/components/tableComponent.scss index 19b24eb66..144a8733e 100644 --- a/webapp/src/components/tableComponent.scss +++ b/webapp/src/components/tableComponent.scss @@ -29,6 +29,13 @@ &.header-cell { padding-right: 0; + + .Icon { + width: 16px; + height: 16px; + vertical-align: middle; + margin-left: 5px; + } } &:focus-within { diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx index c62672fba..58caf4bf6 100644 --- a/webapp/src/components/tableComponent.tsx +++ b/webapp/src/components/tableComponent.tsx @@ -12,6 +12,8 @@ import mutator from '../mutator' import {Utils} from '../utils' import MenuWrapper from '../widgets/menuWrapper' +import SortDownIcon from '../widgets/icons/sortDown' +import SortUpIcon from '../widgets/icons/sortUp' import {CardDialog} from './cardDialog' import RootPortal from './rootPortal' @@ -152,6 +154,12 @@ class TableComponent extends React.Component { filter((template) => activeView.visiblePropertyIds.includes(template.id)). map((template) => { const headerRef = React.createRef() + let sortIcon = undefined + const sortOption = activeView.sortOptions.find(o => o.propertyId === template.id) + if (sortOption) { + sortIcon = sortOption.reversed ? : + } + return (
{ onDragEnd={() => { this.draggedHeaderTemplate = undefined }} - >{template.name}
+ > + {template.name} + {sortIcon} +