FK hints

packages/web/src/datagrid/ColumnLabel.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { SequenceIcon } from '../icons';
+import { SequenceIcon, ForeignKeyIcon } from '../icons';
 
 const Label = styled.span`
   font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
@@ -12,6 +12,7 @@ const Label = styled.span`
 export default function ColumnLabel(column) {
   let Icon = null;
   if (column.autoIncrement) Icon = SequenceIcon;
+  if (column.foreignKey) Icon = ForeignKeyIcon;
   return (
     <Label {...column}>
       {Icon ? <Icon /> : null} {column.headerText || column.columnName}

packages/web/src/datagrid/DataGridCore.js

@@ -64,6 +64,10 @@ const TableBodyCell = styled.td`
   white-space: nowrap;
   overflow: hidden;
 `;
+const HintSpan = styled.span`
+  color: gray;
+  margin-left: 5px;
+`;
 
 /** @param props {import('./types').DataGridProps} */
 export default function DataGridCore(props) {
@@ -163,7 +167,8 @@ export default function DataGridCore(props) {
 
   React.useEffect(() => {
     if (!isLoadedAll && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= loadedRows.length) {
-      loadNextData();
+      const sql = display.getPageQuery(0, 1);
+      if (sql) loadNextData();
     }
     if (display.cache.refreshTime > loadedTime) {
       reload();
@@ -314,6 +319,7 @@ export default function DataGridCore(props) {
                     style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
                   >
                     {row[col.columnName]}
+                    {col.hintColumnName && <HintSpan>{row[col.hintColumnName]}</HintSpan>}
                   </TableBodyCell>
                 ))}
               </TableBodyRow>