@prairielearn/ui 1.1.2 → 1.3.0

package/src/components/NumericInputColumnFilter.tsx

@@ -0,0 +1,153 @@
+import clsx from 'clsx';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+interface NumericInputColumnFilterProps {
+  columnId: string;
+  columnLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+/**
+ * A component that allows the user to filter a numeric column using comparison operators.
+ * Supports syntax like: <1, >0, <=5, >=10, =5, or just 5 (implicit equals)
+ *
+ * @param params
+ * @param params.columnId - The ID of the column
+ * @param params.columnLabel - The label of the column, e.g. "Manual Points"
+ * @param params.value - The current filter value (e.g., ">5" or "10")
+ * @param params.onChange - Callback when the filter value changes
+ */
+export function NumericInputColumnFilter({
+  columnId,
+  columnLabel,
+  value,
+  onChange,
+}: NumericInputColumnFilterProps) {
+  const hasActiveFilter = value.trim().length > 0;
+  const isInvalid = hasActiveFilter && parseNumericFilter(value) === null;
+
+  return (
+    <Dropdown align="end">
+      <Dropdown.Toggle
+        variant="link"
+        class={clsx(
+          'text-muted p-0',
+          hasActiveFilter && (isInvalid ? 'text-warning' : 'text-primary'),
+        )}
+        id={`filter-${columnId}`}
+        aria-label={`Filter ${columnLabel.toLowerCase()}`}
+        title={`Filter ${columnLabel.toLowerCase()}`}
+      >
+        <i
+          class={clsx(
+            'bi',
+            isInvalid
+              ? 'bi-exclamation-triangle'
+              : hasActiveFilter
+                ? 'bi-funnel-fill'
+                : 'bi-funnel',
+          )}
+          aria-hidden="true"
+        />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <div class="p-3" style={{ minWidth: '240px' }}>
+          <label class="form-label small fw-semibold mb-2">{columnLabel}</label>
+          <input
+            type="text"
+            class={clsx('form-control form-control-sm', isInvalid && 'is-invalid')}
+            placeholder="e.g., >0, <5, =10"
+            value={value}
+            onInput={(e) => {
+              if (e.target instanceof HTMLInputElement) {
+                onChange(e.target.value);
+              }
+            }}
+            onClick={(e) => e.stopPropagation()}
+          />
+          {isInvalid && (
+            <div class="invalid-feedback d-block">
+              Invalid filter format. Use operators like <code>&gt;5</code> or <code>&lt;=10</code>
+            </div>
+          )}
+          {!isInvalid && (
+            <div class="form-text small mt-2">
+              Use operators: <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>,{' '}
+              <code>&gt;=</code>, <code>=</code>
+              <br />
+              Example: <code>&gt;5</code> or <code>&lt;=10</code>
+            </div>
+          )}
+          {hasActiveFilter && (
+            <button
+              type="button"
+              class="btn btn-sm btn-link text-decoration-none mt-2 p-0"
+              onClick={() => onChange('')}
+            >
+              Clear filter
+            </button>
+          )}
+        </div>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+/**
+ * Helper function to parse a numeric filter value.
+ * Returns null if the filter is invalid or empty.
+ *
+ * @param filterValue - The filter string (e.g., ">5", "<=10", "3")
+ * @returns Parsed operator and value, or null if invalid
+ */
+export function parseNumericFilter(filterValue: string): {
+  operator: '<' | '>' | '<=' | '>=' | '=';
+  value: number;
+} | null {
+  if (!filterValue.trim()) return null;
+
+  const match = filterValue.trim().match(/^(<=?|>=?|=)?\s*(-?\d+\.?\d*)$/);
+  if (!match) return null;
+
+  const operator = (match[1] || '=') as '<' | '>' | '<=' | '>=' | '=';
+  const value = Number.parseFloat(match[2]);
+
+  if (Number.isNaN(value)) return null;
+
+  return { operator, value };
+}
+
+/**
+ * TanStack Table filter function for numeric columns.
+ * Use this as the `filterFn` for numeric columns.
+ *
+ * @example
+ * {
+ *   id: 'manual_points',
+ *   accessorKey: 'manual_points',
+ *   filterFn: numericColumnFilterFn,
+ * }
+ */
+export function numericColumnFilterFn(row: any, columnId: string, filterValue: string): boolean {
+  const parsed = parseNumericFilter(filterValue);
+  if (!parsed) return true; // Invalid or empty filter = show all
+
+  const cellValue = row.getValue(columnId) as number | null;
+  if (cellValue === null || cellValue === undefined) return false;
+
+  switch (parsed.operator) {
+    case '<':
+      return cellValue < parsed.value;
+    case '>':
+      return cellValue > parsed.value;
+    case '<=':
+      return cellValue <= parsed.value;
+    case '>=':
+      return cellValue >= parsed.value;
+    case '=':
+      return cellValue === parsed.value;
+    default:
+      return true;
+  }
+}

package/src/components/TanstackTable.css

@@ -2,3 +2,52 @@ body.no-user-select {
   user-select: none;
   -webkit-user-select: none;
 }
+
+.tanstack-table-search-input {
+  padding-right: 2.5rem;
+}
+
+.tanstack-table-clear-search {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.25rem 0.5rem;
+  color: var(--bs-secondary);
+  opacity: 0.6;
+  transition: opacity 0.15s ease-in-out;
+  text-decoration: none;
+}
+
+.tanstack-table-clear-search:hover {
+  opacity: 1;
+  color: var(--bs-secondary);
+  text-decoration: none;
+}
+
+.tanstack-table-clear-search:focus {
+  opacity: 1;
+  color: var(--bs-secondary);
+  text-decoration: none;
+}
+
+.btn.btn-tanstack-table {
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-bg: var(--bs-input-bg);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-bg: var(--bs-border-color);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
+  --bs-btn-active-color: var(--bs-body-color);
+  --bs-btn-active-bg: var(--bs-border-color);
+  --bs-btn-active-border-color: var(--bs-border-color);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: var(--bs-body-color);
+  --bs-btn-disabled-bg: var(--bs-secondary-bg);
+  --bs-btn-disabled-border-color: var(--bs-border-color);
+}
+
+.tanstack-table-focusable-shadow:not(:focus-visible) {
+  box-shadow: var(--bs-box-shadow-sm);
+}

package/src/components/TanstackTable.tsx

@@ -2,8 +2,11 @@ import { flexRender } from '@tanstack/react-table';
 import { notUndefined, useVirtualizer } from '@tanstack/react-virtual';
 import type { Header, Row, SortDirection, Table } from '@tanstack/table-core';
 import clsx from 'clsx';
+import type { ComponentChildren } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { JSX } from 'preact/jsx-runtime';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
 
 import { ColumnManager } from './ColumnManager.js';
 import {
@@ -223,6 +226,47 @@ export function TanstackTable<RowDataModel>({
     document.body.classList.toggle('no-user-select', isTableResizing);
   }, [isTableResizing]);
 
+  // Dismiss popovers when their triggering element scrolls out of view
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollElement = parentRef.current;
+      if (!scrollElement) return;
+
+      // Find and check all open popovers
+      const popovers = document.querySelectorAll('.popover.show');
+      popovers.forEach((popover) => {
+        // Find the trigger element for this popover
+        const triggerElement = document.querySelector(`[aria-describedby="${popover.id}"]`);
+        if (!triggerElement) return;
+
+        // Check if the trigger element is still visible in the scroll container
+        const scrollRect = scrollElement.getBoundingClientRect();
+        const triggerRect = triggerElement.getBoundingClientRect();
+
+        // Check if trigger is outside the visible scroll area
+        const isOutOfView =
+          triggerRect.bottom < scrollRect.top ||
+          triggerRect.top > scrollRect.bottom ||
+          triggerRect.right < scrollRect.left ||
+          triggerRect.left > scrollRect.right;
+
+        if (isOutOfView) {
+          // Use Bootstrap's Popover API to properly hide it
+          const popoverInstance = (window as any).bootstrap?.Popover?.getInstance(triggerElement);
+          if (popoverInstance) {
+            popoverInstance.hide();
+          }
+        }
+      });
+    };
+
+    const scrollElement = parentRef.current;
+    if (scrollElement) {
+      scrollElement.addEventListener('scroll', handleScroll);
+      return () => scrollElement.removeEventListener('scroll', handleScroll);
+    }
+  }, []);
+
   // Helper function to get aria-sort value
   const getAriaSort = (sortDirection: false | SortDirection) => {
     switch (sortDirection) {
@@ -260,7 +304,7 @@ export function TanstackTable<RowDataModel>({
           }}
         >
           <table
-            class="table table-hover mb-0 border border-top-0"
+            class="table table-hover mb-0"
             style={{ tableLayout: 'fixed' }}
             aria-label={title}
             role="grid"
@@ -299,9 +343,19 @@ export function TanstackTable<RowDataModel>({
                         aria-sort={canSort ? getAriaSort(sortDirection) : undefined}
                         role="columnheader"
                       >
-                        <div class="d-flex align-items-center justify-content-between gap-2">
+                        <div
+                          class={clsx(
+                            'd-flex align-items-center',
+                            canSort || canFilter
+                              ? 'justify-content-between'
+                              : 'justify-content-center',
+                          )}
+                        >
                           <button
-                            class="text-nowrap flex-grow-1 text-start"
+                            class={clsx(
+                              'text-nowrap text-start',
+                              canSort || canFilter ? 'flex-grow-1' : '',
+                            )}
                             style={{
                               cursor: canSort ? 'pointer' : 'default',
                               overflow: 'hidden',
@@ -331,11 +385,6 @@ export function TanstackTable<RowDataModel>({
                             {header.isPlaceholder
                               ? null
                               : flexRender(header.column.columnDef.header, header.getContext())}
-                            {canSort && (
-                              <span class="ms-2" aria-hidden="true">
-                                <SortIcon sortMethod={sortDirection || false} />
-                              </span>
-                            )}
                             {canSort && (
                               <span class="visually-hidden">
                                 , {getAriaSort(sortDirection)}, click to sort
@@ -343,7 +392,22 @@ export function TanstackTable<RowDataModel>({
                             )}
                           </button>
 
-                          {canFilter && filters[header.column.id]?.({ header })}
+                          {(canSort || canFilter) && (
+                            <div class="d-flex align-items-center">
+                              {canSort && (
+                                <button
+                                  type="button"
+                                  class="btn btn-link text-muted p-0"
+                                  aria-label={`Sort ${columnName.toLowerCase()}`}
+                                  title={`Sort ${columnName.toLowerCase()}`}
+                                  onClick={header.column.getToggleSortingHandler()}
+                                >
+                                  <SortIcon sortMethod={sortDirection || false} />
+                                </button>
+                              )}
+                              {canFilter && filters[header.column.id]?.({ header })}
+                            </div>
+                          )}
                         </div>
                         {tableRect?.width &&
                         tableRect.width > table.getTotalSize() &&
@@ -369,34 +433,42 @@ export function TanstackTable<RowDataModel>({
 
                 return (
                   <tr key={row.id} style={{ height: rowHeight }}>
-                    {visibleCells.map((cell, colIdx) => (
-                      <td
-                        key={cell.id}
-                        // You can tab to the most-recently focused cell.
-                        tabIndex={focusedCell.row === rowIdx && focusedCell.col === colIdx ? 0 : -1}
-                        // We store this so you can navigate around the grid.
-                        data-grid-cell-row={rowIdx}
-                        data-grid-cell-col={colIdx}
-                        style={{
-                          width:
-                            cell.column.id === lastColumnId
-                              ? `max(100%, ${cell.column.getSize()}px)`
-                              : cell.column.getSize(),
-                          position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,
-                          left:
-                            cell.column.getIsPinned() === 'left'
-                              ? cell.column.getStart()
-                              : undefined,
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                        }}
-                        onFocus={() => setFocusedCell({ row: rowIdx, col: colIdx })}
-                        onKeyDown={(e) => handleGridKeyDown(e, rowIdx, colIdx)}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>
-                    ))}
+                    {visibleCells.map((cell, colIdx) => {
+                      const canSort = cell.column.getCanSort();
+                      const canFilter = cell.column.getCanFilter();
+
+                      return (
+                        <td
+                          key={cell.id}
+                          // You can tab to the most-recently focused cell.
+                          tabIndex={
+                            focusedCell.row === rowIdx && focusedCell.col === colIdx ? 0 : -1
+                          }
+                          // We store this so you can navigate around the grid.
+                          data-grid-cell-row={rowIdx}
+                          data-grid-cell-col={colIdx}
+                          class={clsx(!canSort && !canFilter && 'text-center')}
+                          style={{
+                            width:
+                              cell.column.id === lastColumnId
+                                ? `max(100%, ${cell.column.getSize()}px)`
+                                : cell.column.getSize(),
+                            position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,
+                            left:
+                              cell.column.getIsPinned() === 'left'
+                                ? cell.column.getStart()
+                                : undefined,
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                          }}
+                          onFocus={() => setFocusedCell({ row: rowIdx, col: colIdx })}
+                          onKeyDown={(e) => handleGridKeyDown(e, rowIdx, colIdx)}
+                        >
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      );
+                    })}
                   </tr>
                 );
               })}
@@ -409,44 +481,44 @@ export function TanstackTable<RowDataModel>({
           </table>
         </div>
       </div>
-
-      {table.getVisibleLeafColumns().length === 0 && (
+      {table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (
         <div>
           <div
-            class="d-flex flex-column justify-content-center align-items-center text-muted py-4"
+            class="d-flex flex-column justify-content-center align-items-center p-4"
             style={{
               position: 'absolute',
               top: 0,
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'var(--bs-body-bg)',
+              // Allow pointer events (e.g. scrolling) to reach the underlying table.
+              pointerEvents: 'none',
             }}
             role="status"
             aria-live="polite"
           >
-            <i class="bi bi-eye-slash display-4 mb-2" aria-hidden="true" />
-            <p class="mb-0">No columns selected. Use the View menu to show columns.</p>
+            <div
+              class="col-lg-6"
+              style={{
+                // Allow selecting and interacting with the empty state content.
+                pointerEvents: 'auto',
+              }}
+            >
+              {table.getVisibleLeafColumns().length === 0 ? (
+                <TanstackTableEmptyState iconName="bi-eye-slash">
+                  No columns selected. Use the View menu to show columns.
+                </TanstackTableEmptyState>
+              ) : displayedCount === 0 ? (
+                totalCount > 0 ? (
+                  noResultsState
+                ) : (
+                  emptyState
+                )
+              ) : null}
+            </div>
           </div>
         </div>
-      )}
-      {displayedCount === 0 && (
-        <div
-          class="d-flex flex-column justify-content-center align-items-center text-muted py-4"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            background: 'var(--bs-body-bg)',
-          }}
-          role="status"
-          aria-live="polite"
-        >
-          {totalCount > 0 ? noResultsState : emptyState}
-        </div>
-      )}
+      ) : null}
     </div>
   );
 }
@@ -457,6 +529,7 @@ export function TanstackTable<RowDataModel>({
  * @param params.table - The table model
  * @param params.title - The title of the card
  * @param params.headerButtons - The buttons to display in the header
+ * @param params.columnManagerButtons - The buttons to display next to the column manager (View button)
  * @param params.globalFilter - State management for the global filter
  * @param params.globalFilter.value
  * @param params.globalFilter.setValue
@@ -468,6 +541,7 @@ export function TanstackTableCard<RowDataModel>({
   table,
   title,
   headerButtons,
+  columnManagerButtons,
   globalFilter,
   tableOptions,
   downloadButtonOptions = null,
@@ -475,6 +549,7 @@ export function TanstackTableCard<RowDataModel>({
   table: Table<RowDataModel>;
   title: string;
   headerButtons: JSX.Element;
+  columnManagerButtons?: JSX.Element;
   globalFilter: {
     value: string;
     setValue: (value: string) => void;
@@ -485,22 +560,6 @@ export function TanstackTableCard<RowDataModel>({
 }) {
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  // Track screen size for aria-hidden
-  const mediaQuery = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)') : null;
-  const [isMediumOrLarger, setIsMediumOrLarger] = useState(false);
-
-  useEffect(() => {
-    // TODO: This is a workaround to avoid a hydration mismatch.
-    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-    setIsMediumOrLarger(mediaQuery?.matches ?? true);
-  }, [mediaQuery]);
-
-  useEffect(() => {
-    const handler = (e: MediaQueryListEvent) => setIsMediumOrLarger(e.matches);
-    mediaQuery?.addEventListener('change', handler);
-    return () => mediaQuery?.removeEventListener('change', handler);
-  }, [mediaQuery]);
-
   // Focus the search input when Ctrl+F is pressed
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
@@ -532,50 +591,68 @@ export function TanstackTableCard<RowDataModel>({
           </div>
         </div>
       </div>
-      <div class="card-body d-flex flex-column">
-        <div class="d-flex flex-row flex-wrap align-items-center mb-3 gap-2">
-          <div class="flex-grow-1 flex-lg-grow-0 col-xl-6 col-lg-7 d-flex flex-row gap-2">
-            <div class="input-group">
-              <input
-                ref={searchInputRef}
-                type="text"
-                class="form-control"
-                aria-label={globalFilter.placeholder}
-                placeholder={globalFilter.placeholder}
-                value={globalFilter.value}
-                onInput={(e) => {
-                  if (!(e.target instanceof HTMLInputElement)) return;
-                  globalFilter.setValue(e.target.value);
-                }}
-              />
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                aria-label="Clear search"
-                title="Clear search"
-                data-bs-toggle="tooltip"
-                onClick={() => globalFilter.setValue('')}
-              >
-                <i class="bi bi-x-circle" aria-hidden="true" />
-              </button>
-            </div>
-            {/* We do this instead of CSS properties for the accessibility checker.
-              We can't have two elements with the same id of 'column-manager-button'. */}
-            {isMediumOrLarger && <ColumnManager table={table} />}
+      <div class="card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2">
+        <div class="flex-grow-1 flex-lg-grow-0 col-xl-6 col-lg-7 d-flex flex-row gap-2">
+          <div class="position-relative flex-grow-1">
+            <input
+              ref={searchInputRef}
+              type="text"
+              class="form-control tanstack-table-search-input tanstack-table-focusable-shadow"
+              aria-label={globalFilter.placeholder}
+              placeholder={globalFilter.placeholder}
+              value={globalFilter.value}
+              autoComplete="off"
+              onInput={(e) => {
+                if (!(e.target instanceof HTMLInputElement)) return;
+                globalFilter.setValue(e.target.value);
+              }}
+            />
+            {globalFilter.value && (
+              <OverlayTrigger overlay={<Tooltip>Clear search</Tooltip>}>
+                <button
+                  type="button"
+                  class="btn btn-link tanstack-table-clear-search"
+                  aria-label="Clear search"
+                  onClick={() => globalFilter.setValue('')}
+                >
+                  <i class="bi bi-x-circle-fill" aria-hidden="true" />
+                </button>
+              </OverlayTrigger>
+            )}
           </div>
-          {/* We do this instead of CSS properties for the accessibility checker.
-            We can't have two elements with the same id of 'column-manager-button'. */}
-          {!isMediumOrLarger && <ColumnManager table={table} />}
-          <div class="flex-lg-grow-1 d-flex flex-row justify-content-end">
-            <div class="text-muted text-nowrap">
-              Showing {displayedCount} of {totalCount} {title.toLowerCase()}
-            </div>
+          <div class="d-none d-md-block">
+            <ColumnManager table={table} id="column-manager-button-wide" />
+            {columnManagerButtons}
           </div>
         </div>
-        <div class="flex-grow-1">
-          <TanstackTable table={table} title={title} {...tableOptions} />
+        <div class="d-block d-md-none">
+          <ColumnManager table={table} id="column-manager-button-narrow" />
+          {columnManagerButtons}
+        </div>
+        <div class="flex-lg-grow-1 d-flex flex-row justify-content-end">
+          <div class="text-muted text-nowrap">
+            Showing {displayedCount} of {totalCount} {title.toLowerCase()}
+          </div>
         </div>
       </div>
+      <div class="flex-grow-1">
+        <TanstackTable table={table} title={title} {...tableOptions} />
+      </div>
+    </div>
+  );
+}
+
+export function TanstackTableEmptyState({
+  iconName,
+  children,
+}: {
+  iconName: `bi-${string}`;
+  children: ComponentChildren;
+}) {
+  return (
+    <div class="d-flex flex-column justify-content-center align-items-center text-muted">
+      <i class={clsx('bi', iconName, 'display-4 mb-2')} aria-hidden="true" />
+      <div>{children}</div>
     </div>
   );
 }

package/src/components/TanstackTableDownloadButton.tsx

@@ -28,6 +28,8 @@ export function TanstackTableDownloadButton<RowDataModel>({
   const allRowsJSON = allRows.map(mapRowToData).filter((row) => row !== null);
   const filteredRows = table.getRowModel().rows.map((row) => row.original);
   const filteredRowsJSON = filteredRows.map(mapRowToData).filter((row) => row !== null);
+  const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+  const selectedRowsJSON = selectedRows.map(mapRowToData).filter((row) => row !== null);
 
   function downloadJSONAsCSV(
     jsonRows: Record<string, string | number | null>[],
@@ -53,7 +55,7 @@ export function TanstackTableDownloadButton<RowDataModel>({
         class="btn btn-light btn-sm dropdown-toggle"
       >
         <i aria-hidden="true" class="pe-2 bi bi-download" />
-        Download
+        <span class="d-none d-sm-inline">Download</span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-label="Download options">
         <li role="presentation">
@@ -80,6 +82,30 @@ export function TanstackTableDownloadButton<RowDataModel>({
             All {pluralLabel} as JSON
           </button>
         </li>
+        <li role="presentation">
+          <button
+            class="dropdown-item"
+            type="button"
+            role="menuitem"
+            aria-label={`Download selected ${pluralLabel} as CSV file`}
+            disabled={selectedRowsJSON.length === 0}
+            onClick={() => downloadJSONAsCSV(selectedRowsJSON, `${filenameBase}_selected.csv`)}
+          >
+            Selected {pluralLabel} as CSV
+          </button>
+        </li>
+        <li role="presentation">
+          <button
+            class="dropdown-item"
+            type="button"
+            role="menuitem"
+            aria-label={`Download selected ${pluralLabel} as JSON file`}
+            disabled={selectedRowsJSON.length === 0}
+            onClick={() => downloadAsJSON(selectedRowsJSON, `${filenameBase}_selected.json`)}
+          >
+            Selected {pluralLabel} as JSON
+          </button>
+        </li>
         <li role="presentation">
           <button
             class="dropdown-item"