@prairielearn/ui 1.1.1 → 1.2.0

package/src/components/ColumnManager.tsx

@@ -22,7 +22,10 @@ function ColumnMenuItem<RowDataModel>({
 
   if (!column.getCanHide() && !column.getCanPin()) return null;
 
-  const header = typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+  // Use meta.label if available, otherwise fall back to header or column.id
+  const header =
+    (column.columnDef.meta as any)?.label ??
+    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
 
   return (
     <Dropdown.Item
@@ -153,7 +156,7 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
         <i class="bi bi-view-list me-2" aria-hidden="true" />
         View
       </Dropdown.Toggle>
-      <Dropdown.Menu>
+      <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>
         {pinnedColumns.length > 0 && (
           <>
             <div class="px-2 py-1 text-muted small" role="presentation">

package/src/components/MultiSelectColumnFilter.tsx

@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import { type JSX, useMemo } from 'preact/compat';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function defaultRenderValueLabel<T>({ value }: { value: T }) {
+  return <span>{String(value)}</span>;
+}
+
+/**
+ * A component that allows the user to filter a column containing arrays of values.
+ * Uses AND logic: rows must contain ALL selected values to match.
+ *
+ * @param params
+ * @param params.columnId - The ID of the column
+ * @param params.columnLabel - The label of the column, e.g. "Rubric Items"
+ * @param params.allColumnValues - All possible values that can appear in the column
+ * @param params.renderValueLabel - A function that renders the label for a value
+ * @param params.columnValuesFilter - The current state of the column filter
+ * @param params.setColumnValuesFilter - A function that sets the state of the column filter
+ */
+export function MultiSelectColumnFilter<T extends readonly any[]>({
+  columnId,
+  columnLabel,
+  allColumnValues,
+  renderValueLabel = defaultRenderValueLabel,
+  columnValuesFilter,
+  setColumnValuesFilter,
+}: {
+  columnId: string;
+  columnLabel: string;
+  allColumnValues: T;
+  renderValueLabel?: (props: { value: T[number]; isSelected: boolean }) => JSX.Element;
+  columnValuesFilter: T[number][];
+  setColumnValuesFilter: (value: T[number][]) => void;
+}) {
+  const selected = useMemo(() => new Set(columnValuesFilter), [columnValuesFilter]);
+
+  const toggleSelected = (value: T[number]) => {
+    const set = new Set(selected);
+    if (set.has(value)) {
+      set.delete(value);
+    } else {
+      set.add(value);
+    }
+    setColumnValuesFilter(Array.from(set));
+  };
+
+  const hasActiveFilter = selected.size > 0;
+
+  return (
+    <Dropdown align="end">
+      <Dropdown.Toggle
+        variant="link"
+        class="text-muted p-0"
+        id={`filter-${columnId}`}
+        aria-label={`Filter ${columnLabel.toLowerCase()}`}
+        title={`Filter ${columnLabel.toLowerCase()}`}
+      >
+        <i
+          class={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
+          aria-hidden="true"
+        />
+      </Dropdown.Toggle>
+      <Dropdown.Menu class="p-0">
+        <div class="p-3" style={{ minWidth: '250px' }}>
+          <div class="d-flex align-items-center justify-content-between mb-2">
+            <div class="fw-semibold">{columnLabel}</div>
+            <button
+              type="button"
+              class="btn btn-link btn-sm text-decoration-none p-0"
+              onClick={() => setColumnValuesFilter([])}
+            >
+              Clear
+            </button>
+          </div>
+
+          <div class="list-group list-group-flush">
+            {allColumnValues.map((value) => {
+              const isSelected = selected.has(value);
+              return (
+                <div key={value} class="list-group-item d-flex align-items-center gap-3 px-0">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    checked={isSelected}
+                    id={`${columnId}-${value}`}
+                    onChange={() => toggleSelected(value)}
+                  />
+                  <label class="form-check-label fw-normal" for={`${columnId}-${value}`}>
+                    {renderValueLabel({
+                      value,
+                      isSelected,
+                    })}
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

package/src/components/NumericInputColumnFilter.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest';
+
+import { numericColumnFilterFn, parseNumericFilter } from './NumericInputColumnFilter.js';
+
+describe('parseNumericFilter', () => {
+  it('should parse equals operator', () => {
+    expect(parseNumericFilter('5')).toEqual({ operator: '=', value: 5 });
+    expect(parseNumericFilter('=5')).toEqual({ operator: '=', value: 5 });
+    expect(parseNumericFilter('= 5')).toEqual({ operator: '=', value: 5 });
+  });
+
+  it('should parse less than operator', () => {
+    expect(parseNumericFilter('<5')).toEqual({ operator: '<', value: 5 });
+    expect(parseNumericFilter('< 5')).toEqual({ operator: '<', value: 5 });
+  });
+
+  it('should parse greater than operator', () => {
+    expect(parseNumericFilter('>5')).toEqual({ operator: '>', value: 5 });
+    expect(parseNumericFilter('> 5')).toEqual({ operator: '>', value: 5 });
+  });
+
+  it('should parse less than or equal operator', () => {
+    expect(parseNumericFilter('<=5')).toEqual({ operator: '<=', value: 5 });
+    expect(parseNumericFilter('<= 5')).toEqual({ operator: '<=', value: 5 });
+  });
+
+  it('should parse greater than or equal operator', () => {
+    expect(parseNumericFilter('>=5')).toEqual({ operator: '>=', value: 5 });
+    expect(parseNumericFilter('>= 5')).toEqual({ operator: '>=', value: 5 });
+  });
+
+  it('should handle decimals', () => {
+    expect(parseNumericFilter('5.5')).toEqual({ operator: '=', value: 5.5 });
+    expect(parseNumericFilter('>3.14')).toEqual({ operator: '>', value: 3.14 });
+  });
+
+  it('should handle negative numbers', () => {
+    expect(parseNumericFilter('-5')).toEqual({ operator: '=', value: -5 });
+    expect(parseNumericFilter('<-3')).toEqual({ operator: '<', value: -3 });
+  });
+
+  it('should return null for invalid input', () => {
+    expect(parseNumericFilter('')).toBeNull();
+    expect(parseNumericFilter('   ')).toBeNull();
+    expect(parseNumericFilter('abc')).toBeNull();
+    expect(parseNumericFilter('>>')).toBeNull();
+    expect(parseNumericFilter('5.5.5')).toBeNull();
+  });
+
+  it('should handle whitespace', () => {
+    expect(parseNumericFilter('  >  5  ')).toEqual({ operator: '>', value: 5 });
+  });
+});
+
+describe('numericColumnFilterFn', () => {
+  const createMockRow = (value: number | null) => ({
+    getValue: () => value,
+  });
+
+  it('should filter with equals operator', () => {
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '=5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '4')).toBe(false);
+  });
+
+  it('should filter with less than operator', () => {
+    expect(numericColumnFilterFn(createMockRow(3), 'col', '<5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '<5')).toBe(false);
+    expect(numericColumnFilterFn(createMockRow(7), 'col', '<5')).toBe(false);
+  });
+
+  it('should filter with greater than operator', () => {
+    expect(numericColumnFilterFn(createMockRow(7), 'col', '>5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '>5')).toBe(false);
+    expect(numericColumnFilterFn(createMockRow(3), 'col', '>5')).toBe(false);
+  });
+
+  it('should filter with less than or equal operator', () => {
+    expect(numericColumnFilterFn(createMockRow(3), 'col', '<=5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '<=5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(7), 'col', '<=5')).toBe(false);
+  });
+
+  it('should filter with greater than or equal operator', () => {
+    expect(numericColumnFilterFn(createMockRow(7), 'col', '>=5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '>=5')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(3), 'col', '>=5')).toBe(false);
+  });
+
+  it('should return true for invalid or empty filter', () => {
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', 'invalid')).toBe(true);
+  });
+
+  it('should return false for null values when filter is active', () => {
+    expect(numericColumnFilterFn(createMockRow(null), 'col', '>5')).toBe(false);
+  });
+
+  it('should return true for null values when filter is empty', () => {
+    expect(numericColumnFilterFn(createMockRow(null), 'col', '')).toBe(true);
+  });
+});

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.tsx

@@ -195,9 +195,9 @@ export function TanstackTable<RowDataModel>({
   useEffect(() => {
     const selector = `[data-grid-cell-row="${focusedCell.row}"][data-grid-cell-col="${focusedCell.col}"]`;
     const cell = tableRef.current?.querySelector(selector) as HTMLElement | null;
-    if (!cell) {
-      return;
-    }
+    if (!cell) return;
+
+    // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates
     cell.focus();
   }, [focusedCell]);
 
@@ -223,6 +223,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) {
@@ -299,9 +340,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 +382,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 +389,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 +430,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>
                 );
               })}
@@ -457,6 +526,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 +538,7 @@ export function TanstackTableCard<RowDataModel>({
   table,
   title,
   headerButtons,
+  columnManagerButtons,
   globalFilter,
   tableOptions,
   downloadButtonOptions = null,
@@ -475,6 +546,7 @@ export function TanstackTableCard<RowDataModel>({
   table: Table<RowDataModel>;
   title: string;
   headerButtons: JSX.Element;
+  columnManagerButtons?: JSX.Element;
   globalFilter: {
     value: string;
     setValue: (value: string) => void;
@@ -561,11 +633,21 @@ export function TanstackTableCard<RowDataModel>({
             </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} />}
+            {isMediumOrLarger && (
+              <>
+                <ColumnManager table={table} />
+                {columnManagerButtons}
+              </>
+            )}
           </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} />}
+          {!isMediumOrLarger && (
+            <>
+              <ColumnManager table={table} />
+              {columnManagerButtons}
+            </>
+          )}
           <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()}

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"