grid sorting

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import ColumnLabel from './ColumnLabel';
 import DropDownButton from '../widgets/DropDownButton';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
+import { FontIcon } from '../icons';
 
 const HeaderDiv = styled.div`
   display: flex;
@@ -15,15 +16,29 @@ const LabelDiv = styled.div`
   margin: auto;
 `;
 
-export default function ColumnHeaderControl({ column }) {
+const IconWrapper = styled.span`
+  margin-left: 3px;
+`;
+
+export default function ColumnHeaderControl({ column, setSort, order }) {
   return (
     <HeaderDiv>
       <LabelDiv>
         <ColumnLabel {...column} />
+        {order == 'ASC' && (
+          <IconWrapper>
+            <FontIcon icon="fas fa-sort-alpha-down green" />
+          </IconWrapper>
+        )}
+        {order == 'DESC' && (
+          <IconWrapper>
+            <FontIcon icon="fas fa-sort-alpha-down-alt green" />
+          </IconWrapper>
+        )}
       </LabelDiv>
       <DropDownButton>
-        <DropDownMenuItem onClick={() => {}}>Sort ascending</DropDownMenuItem>
-        <DropDownMenuItem onClick={() => {}}>Sort descending</DropDownMenuItem>
+        <DropDownMenuItem onClick={() => setSort('ASC')}>Sort ascending</DropDownMenuItem>
+        <DropDownMenuItem onClick={() => setSort('DESC')}>Sort descending</DropDownMenuItem>
       </DropDownButton>
     </HeaderDiv>
   );

packages/web/src/datagrid/DataGridCore.js

@@ -845,7 +845,11 @@ export default function DataGridCore(props) {
                 key={col.uniqueName}
                 style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
               >
-                <ColumnHeaderControl column={col} />
+                <ColumnHeaderControl
+                  column={col}
+                  setSort={order => display.setSort(col.uniqueName, order)}
+                  order={display.getSortOrder(col.uniqueName)}
+                />
               </TableHeaderCell>
             ))}
           </TableHeaderRow>

packages/web/src/datagrid/gridutil.ts

@@ -29,7 +29,7 @@ export function countColumnSizes(loadedRows, columns, containerWidth, display) {
     context.font = 'bold 14px Helvetica';
 
     let text = column.headerText;
-    let headerWidth = context.measureText(text).width + 50;
+    let headerWidth = context.measureText(text).width + 64;
 
     // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
     // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;

packages/web/src/icons.js

@@ -31,7 +31,7 @@ export function FontIcon({ icon, ...props }) {
 
   if (_.includes(parts, 'spin')) className += ' fa-spin';
 
-  const style = props.style || {};
+  const style = { ...props.style };
 
   const last = parts[parts.length - 1];
   if (last && last != 'spin') {