@prairielearn/ui 1.9.1 → 1.10.0

package/src/components/CategoricalColumnFilter.tsx

@@ -15,7 +15,7 @@ function computeSelected<T extends readonly any[]>(
 }
 
 function defaultRenderValueLabel<T>({ value }: { value: T }) {
-  return <span class="text-nowrap">{String(value)}</span>;
+  return <span className="text-nowrap">{String(value)}</span>;
 }
 /**
  * A component that allows the user to filter a categorical column.
@@ -70,23 +70,26 @@ export function CategoricalColumnFilter<TData, TValue>({
     <Dropdown align="end">
       <Dropdown.Toggle
         variant="link"
-        class="text-muted p-0"
+        className="text-muted p-0"
         id={`filter-${columnId}`}
         aria-label={`Filter ${label.toLowerCase()}`}
         title={`Filter ${label.toLowerCase()}`}
       >
         <i
-          class={clsx('bi', selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
+          className={clsx(
+            'bi',
+            selected.size > 0 ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel',
+          )}
           aria-hidden="true"
         />
       </Dropdown.Toggle>
-      <Dropdown.Menu class="p-0">
-        <div class="p-3 pb-0">
-          <div class="d-flex align-items-center justify-content-between mb-2">
-            <div class="fw-semibold text-nowrap">{label}</div>
+      <Dropdown.Menu className="p-0">
+        <div className="p-3 pb-0">
+          <div className="d-flex align-items-center justify-content-between mb-2">
+            <div className="fw-semibold text-nowrap">{label}</div>
             <button
               type="button"
-              class={clsx('btn btn-link btn-sm text-decoration-none', {
+              className={clsx('btn btn-link btn-sm text-decoration-none', {
                 // Hide the clear button if no filters are applied.
                 // Use `visibility` instead of conditional rendering to avoid layout shift.
                 invisible: selected.size === 0 && mode === 'include',
@@ -97,35 +100,35 @@ export function CategoricalColumnFilter<TData, TValue>({
             </button>
           </div>
 
-          <div class="btn-group btn-group-sm w-100 mb-2">
+          <div className="btn-group btn-group-sm w-100 mb-2">
             <input
               type="radio"
-              class="btn-check"
+              className="btn-check"
               name={`filter-${columnId}-options`}
               id={`filter-${columnId}-include`}
               autocomplete="off"
               checked={mode === 'include'}
               onChange={() => apply('include', selected)}
             />
-            <label class="btn btn-outline-primary" for={`filter-${columnId}-include`}>
-              <span class="text-nowrap">
-                {mode === 'include' && <i class="bi bi-check-lg me-1" aria-hidden="true" />}
+            <label className="btn btn-outline-primary" for={`filter-${columnId}-include`}>
+              <span className="text-nowrap">
+                {mode === 'include' && <i className="bi bi-check-lg me-1" aria-hidden="true" />}
                 Include
               </span>
             </label>
 
             <input
               type="radio"
-              class="btn-check"
+              className="btn-check"
               name={`filter-${columnId}-options`}
               id={`filter-${columnId}-exclude`}
               autocomplete="off"
               checked={mode === 'exclude'}
               onChange={() => apply('exclude', selected)}
             />
-            <label class="btn btn-outline-primary" for={`filter-${columnId}-exclude`}>
-              <span class="text-nowrap">
-                {mode === 'exclude' && <i class="bi bi-check-lg me-1" aria-hidden="true" />}
+            <label className="btn btn-outline-primary" for={`filter-${columnId}-exclude`}>
+              <span className="text-nowrap">
+                {mode === 'exclude' && <i className="bi bi-check-lg me-1" aria-hidden="true" />}
                 Exclude
               </span>
             </label>
@@ -133,7 +136,7 @@ export function CategoricalColumnFilter<TData, TValue>({
         </div>
 
         <div
-          class="list-group list-group-flush"
+          className="list-group list-group-flush"
           style={{
             // This is needed to prevent the last item's background from covering
             // the dropdown's border radius.
@@ -143,16 +146,16 @@ export function CategoricalColumnFilter<TData, TValue>({
           {allColumnValues.map((value) => {
             const isSelected = selected.has(value);
             return (
-              <div key={value} class="list-group-item d-flex align-items-center gap-3">
-                <div class="form-check">
+              <div key={value} className="list-group-item d-flex align-items-center gap-3">
+                <div className="form-check">
                   <input
-                    class="form-check-input"
+                    className="form-check-input"
                     type="checkbox"
                     checked={isSelected}
                     id={`${columnId}-${value}`}
                     onChange={() => toggleSelected(value)}
                   />
-                  <label class="form-check-label fw-normal" for={`${columnId}-${value}`}>
+                  <label className="form-check-label fw-normal" for={`${columnId}-${value}`}>
                     {renderValueLabel({
                       value,
                       isSelected,

package/src/components/ColumnManager.tsx

@@ -27,19 +27,19 @@ function ColumnLeafItem<RowDataModel>({
   return (
     <div
       key={column.id}
-      class={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}
+      className={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}
     >
-      <label class="form-check me-auto text-nowrap d-flex align-items-stretch">
+      <label className="form-check me-auto text-nowrap d-flex align-items-stretch">
         <input
           type="checkbox"
-          class="form-check-input"
+          className="form-check-input"
           checked={column.getIsVisible()}
           disabled={!column.getCanHide()}
           aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}
           aria-describedby={`${column.id}-label`}
           onChange={column.getToggleVisibilityHandler()}
         />
-        <span class="form-check-label ms-2" id={`${column.id}-label`}>
+        <span className="form-check-label ms-2" id={`${column.id}-label`}>
           {header}
         </span>
       </label>
@@ -48,7 +48,7 @@ function ColumnLeafItem<RowDataModel>({
         // Since the HTML changes, but we want to refocus the pin button, we track
         // the active pin button and refocuses it when the column manager is rerendered.
         id={`${column.id}-pin`}
-        class={clsx(
+        className={clsx(
           'btn btn-sm btn-ghost ms-2',
           (!column.getCanPin() || !onPinningBoundary) && 'invisible',
         )}
@@ -59,7 +59,7 @@ function ColumnLeafItem<RowDataModel>({
         data-bs-toggle="tooltip"
         onClick={() => onTogglePin(column.id)}
       >
-        <i class={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden="true" />
+        <i className={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden="true" />
       </button>
     </div>
   );
@@ -98,12 +98,12 @@ function ColumnGroupItem<RowDataModel>({
     (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
 
   return (
-    <div class="d-flex flex-column">
-      <div class="px-2 py-1 d-flex align-items-center justify-content-between">
-        <div class="d-flex align-items-center flex-grow-1">
+    <div className="d-flex flex-column">
+      <div className="px-2 py-1 d-flex align-items-center justify-content-between">
+        <div className="d-flex align-items-center flex-grow-1">
           <input
             type="checkbox"
-            class="form-check-input flex-shrink-0"
+            className="form-check-input flex-shrink-0"
             checked={isAllVisible}
             indeterminate={isSomeVisible}
             aria-label={`Toggle visibility for group '${header}'`}
@@ -111,16 +111,16 @@ function ColumnGroupItem<RowDataModel>({
           />
           <button
             type="button"
-            class="btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0"
+            className="btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0"
             aria-expanded={isExpanded}
             onClick={(e) => {
               e.stopPropagation();
               setIsExpanded(!isExpanded);
             }}
           >
-            <span class="fw-bold text-truncate">{header}</span>
+            <span className="fw-bold text-truncate">{header}</span>
             <i
-              class={clsx(
+              className={clsx(
                 'bi ms-2 text-muted',
                 isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',
               )}
@@ -130,7 +130,7 @@ function ColumnGroupItem<RowDataModel>({
         </div>
       </div>
       {isExpanded && (
-        <div class="ps-3 border-start ms-3 mb-1">
+        <div className="ps-3 border-start ms-3 mb-1">
           {column.columns.map((childCol) => (
             <ColumnItem
               key={childCol.id}
@@ -310,7 +310,7 @@ export function ColumnManager<RowDataModel>({
         id="column-manager"
         variant="tanstack-table"
       >
-        <i class="bi bi-view-list me-2" aria-hidden="true" /> View{' '}
+        <i className="bi bi-view-list me-2" aria-hidden="true" /> View{' '}
       </Dropdown.Toggle>
       <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>
         {topContent && (
@@ -321,7 +321,7 @@ export function ColumnManager<RowDataModel>({
         )}
         {pinnedMenuColumns.length > 0 && (
           <>
-            <div class="px-2 py-1 text-muted small" role="presentation">
+            <div className="px-2 py-1 text-muted small" role="presentation">
               Frozen columns
             </div>
             <div role="group">
@@ -358,11 +358,11 @@ export function ColumnManager<RowDataModel>({
           </>
         )}
         {showResetButton && (
-          <div class="px-2 py-1">
+          <div className="px-2 py-1">
             <Button
               variant="secondary"
               size="sm"
-              class="w-100"
+              className="w-100"
               aria-label="Reset all columns to default visibility and pinning"
               onClick={() => {
                 table.resetColumnVisibility();
@@ -371,7 +371,7 @@ export function ColumnManager<RowDataModel>({
                 setActiveElementId('column-manager');
               }}
             >
-              <i class="bi bi-arrow-counterclockwise me-2" aria-hidden="true" />
+              <i className="bi bi-arrow-counterclockwise me-2" aria-hidden="true" />
               Reset view
             </Button>
           </div>

package/src/components/MultiSelectColumnFilter.tsx

@@ -55,23 +55,23 @@ export function MultiSelectColumnFilter<TData, TValue>({
     <Dropdown align="end">
       <Dropdown.Toggle
         variant="link"
-        class="text-muted p-0"
+        className="text-muted p-0"
         id={`filter-${columnId}`}
         aria-label={`Filter ${label.toLowerCase()}`}
         title={`Filter ${label.toLowerCase()}`}
       >
         <i
-          class={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
+          className={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
           aria-hidden="true"
         />
       </Dropdown.Toggle>
-      <Dropdown.Menu class="p-0">
-        <div class="p-3 pb-0" style={{ minWidth: '250px' }}>
-          <div class="d-flex align-items-center justify-content-between mb-2">
-            <div class="fw-semibold">{label}</div>
+      <Dropdown.Menu className="p-0">
+        <div className="p-3 pb-0" style={{ minWidth: '250px' }}>
+          <div className="d-flex align-items-center justify-content-between mb-2">
+            <div className="fw-semibold">{label}</div>
             <button
               type="button"
-              class="btn btn-link btn-sm text-decoration-none p-0"
+              className="btn btn-link btn-sm text-decoration-none p-0"
               onClick={() => column.setFilterValue([])}
             >
               Clear
@@ -80,7 +80,7 @@ export function MultiSelectColumnFilter<TData, TValue>({
         </div>
 
         <div
-          class="list-group list-group-flush"
+          className="list-group list-group-flush"
           style={{
             // This is needed to prevent the last item's background from covering
             // the dropdown's border radius.
@@ -90,16 +90,16 @@ export function MultiSelectColumnFilter<TData, TValue>({
           {allColumnValues.map((value) => {
             const isSelected = selected.has(value);
             return (
-              <div key={value} class="list-group-item d-flex align-items-center gap-3">
-                <div class="form-check">
+              <div key={value} className="list-group-item d-flex align-items-center gap-3">
+                <div className="form-check">
                   <input
-                    class="form-check-input"
+                    className="form-check-input"
                     type="checkbox"
                     checked={isSelected}
                     id={`${columnId}-${value}`}
                     onChange={() => toggleSelected(value)}
                   />
-                  <label class="form-check-label fw-normal" for={`${columnId}-${value}`}>
+                  <label className="form-check-label fw-normal" for={`${columnId}-${value}`}>
                     {renderValueLabel({
                       value,
                       isSelected,

package/src/components/NumericInputColumnFilter.tsx

@@ -43,7 +43,7 @@ export function NumericInputColumnFilter<TData, TValue>({
     <Dropdown align="end">
       <Dropdown.Toggle
         variant="link"
-        class={clsx(
+        className={clsx(
           'text-muted p-0',
           hasActiveFilter && (isInvalid ? 'text-warning' : 'text-primary'),
         )}
@@ -52,7 +52,7 @@ export function NumericInputColumnFilter<TData, TValue>({
         title={`Filter ${label.toLowerCase()}`}
       >
         <i
-          class={clsx(
+          className={clsx(
             'bi',
             isInvalid
               ? 'bi-exclamation-triangle'
@@ -63,18 +63,15 @@ export function NumericInputColumnFilter<TData, TValue>({
           aria-hidden="true"
         />
       </Dropdown.Toggle>
-      <Dropdown.Menu
-        // eslint-disable-next-line @eslint-react/no-forbidden-props
-        className="p-0"
-      >
-        <div class="p-3" style={{ minWidth: '240px' }}>
-          <div class="d-flex align-items-center justify-content-between mb-2">
-            <label class="form-label fw-semibold mb-0" id={`${columnId}-filter-label`}>
+      <Dropdown.Menu className="p-0">
+        <div className="p-3" style={{ minWidth: '240px' }}>
+          <div className="d-flex align-items-center justify-content-between mb-2">
+            <label className="form-label fw-semibold mb-0" id={`${columnId}-filter-label`}>
               {label}
             </label>
             <button
               type="button"
-              class={clsx(
+              className={clsx(
                 'btn btn-link btn-sm text-decoration-none',
                 !hasActiveFilter && 'invisible',
               )}
@@ -87,7 +84,7 @@ export function NumericInputColumnFilter<TData, TValue>({
           </div>
           <input
             type="text"
-            class={clsx('form-control form-control-sm', isInvalid && 'is-invalid')}
+            className={clsx('form-control form-control-sm', isInvalid && 'is-invalid')}
             placeholder="e.g., >0, <5, =10"
             aria-labelledby={`${columnId}-filter-label`}
             value={filterValue}
@@ -102,19 +99,19 @@ export function NumericInputColumnFilter<TData, TValue>({
             onClick={(e) => e.stopPropagation()}
           />
           {isInvalid && (
-            <div class="invalid-feedback d-block">
+            <div className="invalid-feedback d-block">
               Invalid filter format. Use operators like <code>&gt;5</code> or <code>&lt;=10</code>
             </div>
           )}
           {!isInvalid && (
-            <small class="form-text text-nowrap" id={`${columnId}-filter-description`}>
+            <small className="form-text text-nowrap" id={`${columnId}-filter-description`}>
               Operators: <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>,{' '}
               <code>&gt;=</code>, <code>=</code>
             </small>
           )}
-          <div class="form-check mt-2">
+          <div className="form-check mt-2">
             <input
-              class="form-check-input"
+              className="form-check-input"
               type="checkbox"
               checked={emptyOnly}
               id={`${columnId}-empty-filter`}
@@ -126,7 +123,7 @@ export function NumericInputColumnFilter<TData, TValue>({
                 );
               }}
             />
-            <label class="form-check-label" for={`${columnId}-empty-filter`}>
+            <label className="form-check-label" for={`${columnId}-empty-filter`}>
               Empty values
             </label>
           </div>

package/src/components/PresetFilterDropdown.tsx

@@ -123,7 +123,7 @@ export function PresetFilterDropdown<OptionName extends string, TData>({
   return (
     <Dropdown as={ButtonGroup}>
       <Dropdown.Toggle variant="tanstack-table">
-        <i class="bi bi-funnel me-2" aria-hidden="true" />
+        <i className="bi bi-funnel me-2" aria-hidden="true" />
         {label}: {displayLabel}
       </Dropdown.Toggle>
       <Dropdown.Menu>
@@ -137,7 +137,7 @@ export function PresetFilterDropdown<OptionName extends string, TData>({
               active={isSelected}
               onClick={() => handleOptionClick(optionName as OptionName)}
             >
-              <i class={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />
+              <i className={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />
               {optionName}
             </Dropdown.Item>
           );
@@ -145,7 +145,7 @@ export function PresetFilterDropdown<OptionName extends string, TData>({
         {/* Show Custom option only when no preset matches */}
         {selectedOption === null && (
           <Dropdown.Item as="button" type="button" active disabled>
-            <i class="bi bi-check-circle-fill me-2" />
+            <i className="bi bi-check-circle-fill me-2" />
             Custom
           </Dropdown.Item>
         )}

package/src/components/TanstackTable.tsx

@@ -43,7 +43,7 @@ function TableCell<RowDataModel>({
       tabIndex={0}
       data-grid-cell-row={rowIdx}
       data-grid-cell-col={colIdx}
-      class={clsx(!canSort && !canFilter && 'text-center')}
+      className={clsx(!canSort && !canFilter && 'text-center')}
       style={{
         display: 'flex',
         width: cell.column.getSize(),
@@ -259,7 +259,7 @@ export function TanstackTable<RowDataModel>({
   const totalCount = table.getCoreRowModel().rows.length;
 
   return (
-    <div style={{ position: 'relative' }} class="d-flex flex-column h-100">
+    <div style={{ position: 'relative' }} className="d-flex flex-column h-100">
       <div
         ref={scrollContainerRef}
         style={{
@@ -280,13 +280,13 @@ export function TanstackTable<RowDataModel>({
           }}
         >
           <table
-            class="table table-hover mb-0"
+            className="table table-hover mb-0"
             style={{ display: 'grid', tableLayout: 'fixed' }}
             aria-label={title}
             role="grid"
           >
             <thead
-              class="position-sticky top-0 w-100 border-top"
+              className="position-sticky top-0 w-100 border-top"
               style={{
                 display: 'grid',
                 zIndex: 1,
@@ -295,7 +295,7 @@ export function TanstackTable<RowDataModel>({
             >
               <tr
                 key={leafHeaderGroup.id}
-                class="d-flex w-100"
+                className="d-flex w-100"
                 style={{ minWidth: `${table.getTotalSize()}px` }}
               >
                 {/* Left pinned columns */}
@@ -342,14 +342,14 @@ export function TanstackTable<RowDataModel>({
                 {/* Filler to span remaining width */}
                 <th
                   tabIndex={-1}
-                  class="d-flex flex-grow-1 p-0"
+                  className="d-flex flex-grow-1 p-0"
                   style={{ minWidth: 0 }}
                   aria-hidden="true"
                 />
               </tr>
             </thead>
             <tbody
-              class="position-relative w-100"
+              className="position-relative w-100"
               style={{
                 display: 'grid',
                 height: `${rowVirtualizer.getTotalSize()}px`,
@@ -368,7 +368,7 @@ export function TanstackTable<RowDataModel>({
                     key={row.id}
                     ref={(node) => rowVirtualizer.measureElement(node)}
                     data-index={virtualRow.index}
-                    class="d-flex position-absolute w-100"
+                    className="d-flex position-absolute w-100"
                     style={{
                       transform: `translateY(${virtualRow.start}px)`,
                       minWidth: `${table.getTotalSize()}px`,
@@ -428,7 +428,7 @@ export function TanstackTable<RowDataModel>({
                     {/* Filler to span remaining width */}
                     <td
                       tabIndex={-1}
-                      class="d-flex flex-grow-1 p-0"
+                      className="d-flex flex-grow-1 p-0"
                       style={{ minWidth: 0 }}
                       aria-hidden="true"
                     />
@@ -442,7 +442,7 @@ export function TanstackTable<RowDataModel>({
       {table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (
         <div>
           <div
-            class="d-flex flex-column justify-content-center align-items-center p-4"
+            className="d-flex flex-column justify-content-center align-items-center p-4"
             style={{
               position: 'absolute',
               top: 0,
@@ -456,7 +456,7 @@ export function TanstackTable<RowDataModel>({
             aria-live="polite"
           >
             <div
-              class="col-lg-6"
+              className="col-lg-6"
               style={{
                 // Allow selecting and interacting with the empty state content.
                 pointerEvents: 'auto',
@@ -559,11 +559,11 @@ export function TanstackTableCard<RowDataModel>({
   const totalCount = table.getCoreRowModel().rows.length;
 
   return (
-    <div class={clsx('card d-flex flex-column', className)} {...divProps}>
-      <div class="card-header bg-primary text-white">
-        <div class="d-flex align-items-center justify-content-between gap-2">
+    <div className={clsx('card d-flex flex-column', className)} {...divProps}>
+      <div className="card-header bg-primary text-white">
+        <div className="d-flex align-items-center justify-content-between gap-2">
           <div>{title}</div>
-          <div class="d-flex gap-2">
+          <div className="d-flex gap-2">
             {headerButtons}
 
             {downloadButtonOptions && (
@@ -577,12 +577,12 @@ export function TanstackTableCard<RowDataModel>({
           </div>
         </div>
       </div>
-      <div class="card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2">
-        <div class="position-relative w-100" style={{ maxWidth: 'min(400px, 100%)' }}>
+      <div className="card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2">
+        <div className="position-relative w-100" style={{ maxWidth: 'min(400px, 100%)' }}>
           <input
             ref={searchInputRef}
             type="text"
-            class="form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow"
+            className="form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow"
             aria-label={globalFilter.placeholder}
             placeholder={globalFilter.placeholder}
             value={inputValue}
@@ -597,7 +597,7 @@ export function TanstackTableCard<RowDataModel>({
             <OverlayTrigger overlay={<Tooltip>Clear search</Tooltip>}>
               <button
                 type="button"
-                class="btn btn-floating-icon"
+                className="btn btn-floating-icon"
                 aria-label="Clear search"
                 onClick={() => {
                   setInputValue('');
@@ -605,20 +605,20 @@ export function TanstackTableCard<RowDataModel>({
                   table.setGlobalFilter('');
                 }}
               >
-                <i class="bi bi-x-circle-fill" aria-hidden="true" />
+                <i className="bi bi-x-circle-fill" aria-hidden="true" />
               </button>
             </OverlayTrigger>
           )}
         </div>
-        <div class="d-flex flex-wrap flex-row align-items-center gap-2">
+        <div className="d-flex flex-wrap flex-row align-items-center gap-2">
           <ColumnManager table={table} topContent={columnManager?.topContent} />
           {columnManager?.buttons}
         </div>
-        <div class="ms-auto text-muted text-nowrap">
+        <div className="ms-auto text-muted text-nowrap">
           Showing {displayedCount} of {totalCount} {totalCount === 1 ? singularLabel : pluralLabel}
         </div>
       </div>
-      <div class="flex-grow-1">
+      <div className="flex-grow-1">
         <TanstackTable table={table} title={title} {...tableOptions} />
       </div>
     </div>
@@ -633,8 +633,8 @@ export function TanstackTableEmptyState({
   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 className="d-flex flex-column justify-content-center align-items-center text-muted">
+      <i className={clsx('bi', iconName, 'display-4 mb-2')} aria-hidden="true" />
       <div>{children}</div>
     </div>
   );

package/src/components/TanstackTableDownloadButton.tsx

@@ -54,22 +54,22 @@ export function TanstackTableDownloadButton<RowDataModel>({
   }
 
   return (
-    <div class="btn-group">
+    <div className="btn-group">
       <button
         type="button"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         aria-haspopup="true"
         aria-label={`Download ${pluralLabel} data in various formats`}
-        class="btn btn-light btn-sm dropdown-toggle"
+        className="btn btn-light btn-sm dropdown-toggle"
       >
-        <i aria-hidden="true" class="pe-2 bi bi-download" />
-        <span class="d-none d-sm-inline">Download</span>
+        <i aria-hidden="true" className="pe-2 bi bi-download" />
+        <span className="d-none d-sm-inline">Download</span>
       </button>
-      <ul class="dropdown-menu" role="menu" aria-label="Download options">
+      <ul className="dropdown-menu" role="menu" aria-label="Download options">
         <li role="presentation">
           <button
-            class="dropdown-item"
+            className="dropdown-item"
             type="button"
             role="menuitem"
             aria-label={`Download all ${pluralLabel} as CSV file`}
@@ -81,7 +81,7 @@ export function TanstackTableDownloadButton<RowDataModel>({
         </li>
         <li role="presentation">
           <button
-            class="dropdown-item"
+            className="dropdown-item"
             type="button"
             role="menuitem"
             aria-label={`Download all ${pluralLabel} as JSON file`}
@@ -95,7 +95,7 @@ export function TanstackTableDownloadButton<RowDataModel>({
           <>
             <li role="presentation">
               <button
-                class="dropdown-item"
+                className="dropdown-item"
                 type="button"
                 role="menuitem"
                 aria-label={`Download selected ${pluralLabel} as CSV file`}
@@ -108,7 +108,7 @@ export function TanstackTableDownloadButton<RowDataModel>({
             </li>
             <li role="presentation">
               <button
-                class="dropdown-item"
+                className="dropdown-item"
                 type="button"
                 role="menuitem"
                 aria-label={`Download selected ${pluralLabel} as JSON file`}
@@ -123,7 +123,7 @@ export function TanstackTableDownloadButton<RowDataModel>({
         )}
         <li role="presentation">
           <button
-            class="dropdown-item"
+            className="dropdown-item"
             type="button"
             role="menuitem"
             aria-label={`Download filtered ${pluralLabel} as CSV file`}
@@ -136,7 +136,7 @@ export function TanstackTableDownloadButton<RowDataModel>({
         </li>
         <li role="presentation">
           <button
-            class="dropdown-item"
+            className="dropdown-item"
             type="button"
             role="menuitem"
             aria-label={`Download filtered ${pluralLabel} as JSON file`}