@guardian/interactive-component-library 0.1.0-alpha.36 → 0.1.0-alpha.38

package/dist/interactive-component-library.umd.cjs

@@ -1200,6 +1200,11 @@
     return (a, b) => {
       const valueA = a[accessor];
       const valueB = b[accessor];
+      if (valueA === null) {
+        return -1;
+      } else if (valueB === null) {
+        return 1;
+      }
       if (valueA < valueB)
         return -1;
       if (valueA > valueB)
@@ -1211,6 +1216,11 @@
     return (a, b) => {
       const valueA = a[accessor];
       const valueB = b[accessor];
+      if (valueA === null) {
+        return 1;
+      } else if (valueB === null) {
+        return -1;
+      }
       if (valueA > valueB)
         return -1;
       if (valueA < valueB)
@@ -1313,21 +1323,23 @@
         const rowData = JSON.stringify(this.row, null, 2);
         throw new Error(`Missing value for key ${this.column.accessor} in ${rowData}`);
       }
-      return this.row[this.column.accessor].toString();
+      return this.row[this.column.accessor] !== null ? this.row[this.column.accessor].toString() : "null";
     }
   }
-  const table = "_table_1dg64_9";
-  const hideHeader = "_hideHeader_1dg64_19";
-  const hideHeaderNoBorder = "_hideHeaderNoBorder_1dg64_28";
-  const headerCell = "_headerCell_1dg64_32";
-  const headerCellButton = "_headerCellButton_1dg64_40";
-  const bodyRow = "_bodyRow_1dg64_49";
-  const bodyCell = "_bodyCell_1dg64_54";
+  const table = "_table_fhbur_9";
+  const hideHeader = "_hideHeader_fhbur_20";
+  const hideHeaderNoBorder = "_hideHeaderNoBorder_fhbur_29";
+  const headerCell = "_headerCell_fhbur_33";
+  const stickyHeader = "_stickyHeader_fhbur_42";
+  const headerCellButton = "_headerCellButton_fhbur_49";
+  const bodyRow = "_bodyRow_fhbur_58";
+  const bodyCell = "_bodyCell_fhbur_62";
   const defaultStyles$f = {
     table,
     hideHeader,
     hideHeaderNoBorder,
     headerCell,
+    stickyHeader,
     headerCellButton,
     bodyRow,
     bodyCell
@@ -1336,6 +1348,7 @@
     columns,
     data,
     hideHeader: hideHeader2 = false,
+    stickyHeader: stickyHeader2 = false,
     styles: styles2
   }) {
     const [sortState, setSortState] = hooks.useState(() => {
@@ -1374,9 +1387,13 @@
         children: jsxRuntime.jsx("tr", {
           children: table2.columns.map((column, index) => {
             var _a;
+            let columnStyle = mergeStyles(styles2.headerCell, (_a = column.styles) == null ? void 0 : _a.headerCell);
+            if (stickyHeader2) {
+              columnStyle = mergeStyles(columnStyle, styles2.stickyHeader);
+            }
             return jsxRuntime.jsx("th", {
               scope: "col",
-              className: mergeStyles(styles2.headerCell, (_a = column.styles) == null ? void 0 : _a.headerCell),
+              className: columnStyle,
               children: jsxRuntime.jsx(HeaderCell, {
                 styles: mergeStyles(styles2, column.styles),
                 onClick: () => sortByColumn(index),
@@ -1856,11 +1873,11 @@
       })]
     });
   });
-  const borderTop = "_borderTop_1yz7f_9";
-  const section = "_section_1yz7f_14";
-  const fullWidth = "_fullWidth_1yz7f_57";
-  const header = "_header_1yz7f_96";
-  const content = "_content_1yz7f_133";
+  const borderTop = "_borderTop_gph7y_9";
+  const section = "_section_gph7y_13";
+  const fullWidth = "_fullWidth_gph7y_19";
+  const header = "_header_gph7y_95";
+  const content = "_content_gph7y_132";
   const defaultStyles$9 = {
     borderTop,
     section,