nitro-web 0.2.2 → 0.2.4

package/components/partials/element/dropdown.tsx

@@ -72,7 +72,9 @@ export const Dropdown = forwardRef(function Dropdown({
     const pageClick = (event: MouseEvent | FocusEvent) => {
       try {
         // If the active element exists and is clicked outside of the dropdown, toggle the dropdown
-        if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target as Node)) setIsActive(!isActive)
+        if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target as Node)) {
+          setIsActive(!isActive)
+        }
       } catch (_e) {
         // Errors throw for contains() when the user clicks off the webpage when open
         setIsActive(!isActive)
@@ -140,7 +142,7 @@ export const Dropdown = forwardRef(function Dropdown({
 
   function onMouseDown(e: { key: string, preventDefault: Function, target: EventTarget | null }) {
     if (e.key && e.key != 'Enter') return
-    if (e.key) e.preventDefault() // for button, stops buttons firing twice
+    if (e.key) e.preventDefault() // Enter on a <button> also fires a native click, cancel to avoid toggling twice
 
     if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) {
       if (isActive && preventCloseOnClickChild && dropdownRef.current?.contains(e.target as Node)) return // keep active
@@ -148,13 +150,20 @@ export const Dropdown = forwardRef(function Dropdown({
     }
   }
 
-  function onClick(option: { onClick?: Function, preventCloseOnClick?: boolean }, e: React.MouseEvent) {
+  function onClick(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  function onItemClick(option: { onClick?: Function, preventCloseOnClick?: boolean }, e: React.MouseEvent) {
     if (option.onClick) option.onClick(e, option)
     if (!menuIsOpen && !option?.preventCloseOnClick) setIsActive(!isActive)
   }
 
   return (
-    <div 
+    <div
+      ref={dropdownRef} 
+      css={style}
       class={
         `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
         (isHoverable ? ' is-hoverable' : '') +
@@ -164,25 +173,36 @@ export const Dropdown = forwardRef(function Dropdown({
         ' nitro-dropdown' +
         (className ? ` ${className}` : '')
       }
-      onClick={(e) => { e.stopPropagation(); e.preventDefault() }} // required for dropdowns inside row links
-      ref={dropdownRef} 
-      css={style}
     >
       {
         (Array.isArray(children) ? children : [children]).map((el, key) => {
           const onKeyDown = onMouseDown 
           if (!el.type) throw new Error('Dropdown component requires a valid child element')
-          return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
+          return cloneElement(el, { key, onMouseDown, onKeyDown, onClick })
         })
       }
       <ul
-        style={{ 
-          minWidth: minWidth, 
-          maxHeight: maxHeight, 
+        // Mousedown on non-focusable menu content now focuses the ul instead of escaping to parent link row,
+        // so the window 'focus' listener doesn't close the menu early
+        tabIndex={-1}
+        // Keep mousedown from bubbling to parent row handlers (focus containment is handled by tabIndex above)
+        onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
+        onClick={(e: React.MouseEvent) => {
+          // Keep menu clicks from reaching parent row click handlers
+          e.stopPropagation()
+          // Cancel parent <a> row navigation, unless a link INSIDE the menu was clicked
+          // (closest() doesn't stop at the ul, so check the matched link is contained within it)
+          const link = (e.target as HTMLElement).closest('a[href]')
+          if (!link || !e.currentTarget.contains(link)) e.preventDefault()
+        }}
+        style={{
+          minWidth: minWidth,
+          maxHeight: maxHeight,
           ...(maxHeight ? { overflow: 'auto' } : {}),
         }}
-        class={
-          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
+        class={twMerge(
+          `${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none outline-none min-w-full z-[1] ${menuClassName||''}`
+        )}
       >
         {menuContent}
         {
@@ -192,7 +212,7 @@ export const Dropdown = forwardRef(function Dropdown({
               <li 
                 key={i} 
                 className={twMerge(`${optionStyle} ${option.className} ${menuOptionClassName}`)}
-                onClick={(e: React.MouseEvent) => onClick(option, e)}
+                onClick={(e: React.MouseEvent) => onItemClick(option, e)}
               >
                 { !!option.iconLeft && option.iconLeft }
                 <span class="flex-auto">{option.label}</span>

package/components/partials/element/table.tsx

@@ -26,8 +26,10 @@ export type TableRow = {
 export type TableProps<T> = {
   // todo: put the classnames into a single object
   columns: TableColumn[]
-  rows: T[]
   generateTd: (col: TableColumn, row: T, i: number, isLast: boolean) => JSX.Element | null
+  rows: T[]
+  // Optional settings
+  addOverflowScroll?: boolean
   generateCheckboxActions?: (selectedRowIds: string[], setSelectedRowIds: (selectedRowIds: string[]) => void) => JSX.Element | null
   headerHeightMin?: number
   rowHeightMin?: number
@@ -39,7 +41,10 @@ export type TableProps<T> = {
   rowLink?: (row: T) => string
   columnGap?: number
   columnPaddingX?: number
+  checkboxSize?: number
+  // Class names
   className?: string
+  scrollContainerClassName?: string
   tableClassName?: string
   rowClassName?: string
   rowClassNameFn?: (row: T, i: number) => string
@@ -48,8 +53,8 @@ export type TableProps<T> = {
   columnSelectedClassName?: string
   columnHeaderClassName?: string
   checkboxClassName?: string
-  checkboxSize?: number
   loadingOverlayClassName?: string
+  // Loading
   isLoading?:boolean
   loadingMessage?: string
   showLoadingInline?: boolean|JSX.Element
@@ -57,22 +62,26 @@ export type TableProps<T> = {
 }
 
 export function Table<T extends TableRow>({ 
-  rows, 
   columns: columnsProp, 
-  generateTd, 
+  generateTd,
+  rows,
+  // Optional settings
+  addOverflowScroll,
+  checkboxSize=16,
+  columnGap=11,
+  columnPaddingX=11,
   generateCheckboxActions,
   headerHeightMin=40,
-  rowHeightMin=48, 
   rowContentHeightMax, 
-  rowLinesMax, 
-  rowSideColor,
   rowGap=0,
-  rowOnClick,
+  rowHeightMin=48, 
+  rowLinesMax, 
   rowLink,
-  columnGap=11,
-  columnPaddingX=11,
+  rowOnClick,
+  rowSideColor,
   // Class names
   className,
+  scrollContainerClassName,
   tableClassName,
   rowClassName,
   rowClassNameFn,
@@ -81,7 +90,6 @@ export function Table<T extends TableRow>({
   columnSelectedClassName,
   columnHeaderClassName,
   checkboxClassName,
-  checkboxSize=16,
   loadingOverlayClassName,
   // Loading
   isLoading=false,
@@ -161,190 +169,192 @@ export function Table<T extends TableRow>({
   }, [rowSideColor, columnPaddingX, columnGap])
 
   return (
-    <div 
-      style={{ marginTop: -rowGap }}
-      className={twMerge('overflow-x-auto thin-scrollbar', className)}
-    >
+    <div className={className}>
       <div 
-        style={{ borderSpacing: `0 ${rowGap}px` }}
-        className={twMerge('table w-full border-separate', showLoadingOverlay ? 'relative' : '', tableClassName)}
+        style={{ marginTop: -rowGap, marginBottom: -rowGap }} 
+        className={twMerge(addOverflowScroll ? 'overflow-x-auto thin-scrollbar' : '', scrollContainerClassName)}
       >
-        {/* Thead row */}
-        <div className="table-row relative">
-          {
-            columns.map((col, j) => {
-              const disableSort = col.disableSort || selectedRowIds.length
-              const { pl, pr } = getColumnPadding(j, undefined, 'thead')
+        <div 
+          style={{ borderSpacing: `0 ${rowGap}px` }}
+          className={twMerge('table w-full border-separate', showLoadingOverlay ? 'relative' : '', tableClassName)}
+        >
+          {/* Thead row */}
+          <div className="table-row relative">
+            {
+              columns.map((col, j) => {
+                const disableSort = col.disableSort || selectedRowIds.length
+                const { pl, pr } = getColumnPadding(j, undefined, 'thead')
 
-              if (col.isHidden) return <Fragment key={j} />
-              return (
-                <div
-                  key={j}
-                  onClick={disableSort ? undefined : () => onSort(col)}
-                  style={{ height: headerHeightMin, minWidth: col.minWidth, paddingLeft: pl, paddingRight: pr }}
-                  className={twMerge(
-                    _columnClassName,
-                    'h-auto text-sm font-medium border-t-1',
-                    disableSort ? '' : 'cursor-pointer select-none',
-                    getAlignClass(col.align),
-                    columnClassName,
-                    columnHeaderClassName,
-                    columnClassNameFn ? columnClassNameFn(col, undefined, j) : '',
-                    col.className
-                  )}
-                >
+                if (col.isHidden) return <Fragment key={j} />
+                return (
                   <div
-                    style={{ maxHeight: rowContentHeightMax }}
+                    key={j}
+                    onClick={disableSort ? undefined : () => onSort(col)}
+                    style={{ height: headerHeightMin, minWidth: col.minWidth, paddingLeft: pl, paddingRight: pr }}
                     className={twMerge(
-                      col.value == 'checkbox' ? 'relative' : getLineClampClassName(col.rowLinesMax),
-                      rowContentHeightMax ? 'overflow-hidden' : '',
-                      col.overflow ? 'overflow-visible' : '',
-                      col.innerClassName
+                      _columnClassName,
+                      'h-auto text-sm font-medium border-t-1',
+                      disableSort ? '' : 'cursor-pointer select-none',
+                      getAlignClass(col.align),
+                      columnClassName,
+                      columnHeaderClassName,
+                      columnClassNameFn ? columnClassNameFn(col, undefined, j) : '',
+                      col.className
                     )}
-                  > 
-                    {
-                      col.value == 'checkbox'
-                        ? <Fragment>
-                            <Checkbox 
-                              size={checkboxSize}
-                              name={`checkbox-all-${rand}`}
-                              hitboxPadding={5}
-                              checked={rows.length > 0 && selectedRowIds.length === rows.length}
-                              className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
-                              checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
-                              onChange={(e) => onSelect('all', e.target.checked)}
-                            />
-                            <div 
-                              className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[35px] [&>*]:z-10 whitespace-nowrap`}
-                            >
-                              {generateCheckboxActions && generateCheckboxActions(selectedRowIds, setSelectedRowIds)}
-                            </div>
-                          </Fragment>
-                        : <span className={twMerge(
-                            'flex items-center gap-x-2 transition-opacity',
-                            selectedRowIds.length ? 'opacity-0' : '',
-                            getAlignClass(col.align, true)
-                          )}>
-                            <span>{col.label}</span>
-                            {
-                              (!col.disableSort && sortBy == col.sortByValue) 
-                                ? (sort == '1' 
-                                    ? <ChevronDownIcon class='shrink-0 size-[16px]' /> 
-                                    : <ChevronUpIcon class='shrink-0 size-[16px]' />
-                                  )
-                                : col.align == 'left' && <div class='size-[16px] shrink-0' /> // prevent layout shift on sort
-                            }
-                          </span>
-                    }
-                  </div>
-                </div>
-              )
-            })
-          }
-        </div>
-        {/* Tbody rows */}
-        {
-          rowsToRender.map((row: T, i: number) => {
-            const isSelected = selectedRowIds.includes(row._id || '')
-            const Element = (rowLink ? Link : 'div') as React.ElementType
-            const extraProps = rowLink ? { to: rowLink(row) } : { onClick: rowOnClick ? () => rowOnClick(row) : undefined }
-            return (
-              <Element
-                {...extraProps}
-                key={`${row._id}-${i}`}
-                id={`row-${row._id}-${i}`}
-                className={twMerge(
-                  `table-row relative ${(rowOnClick || rowLink) ? 'cursor-pointer' : ''} ${isSelected ? 'is-selected' : ''}`,
-                  rowClassName,
-                  rowClassNameFn ? rowClassNameFn(row, i) : ''
-                )}
-              >
-                {columns.map((col, j) => {
-                  const rowType = row._id ? 'row' : isLoading ? 'loading' : 'empty'
-                  const { pl, pr, sideColor } = getColumnPadding(j, isLoading ? undefined : row, rowType)
-                  if (col.isHidden) return <Fragment key={j} />
-                  return (
+                  >
                     <div
-                      key={j}
-                      style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
+                      style={{ maxHeight: rowContentHeightMax }}
                       className={twMerge(
-                        _columnClassName,
-                        getAlignClass(col.align),
-                        columnClassName,
-                        columnClassNameFn ? columnClassNameFn(col, row, i) : '',
-                        col.className,
-                        isSelected ? `bg-gray-50 ${columnSelectedClassName||''}` : ''
+                        col.value == 'checkbox' ? 'relative' : getLineClampClassName(col.rowLinesMax),
+                        rowContentHeightMax ? 'overflow-hidden' : '',
+                        col.overflow ? 'overflow-visible' : '',
+                        col.innerClassName
                       )}
-                    >
-                      <div 
-                        // pl:sideColorPadding was originally here
-                        style={{ maxHeight: rowContentHeightMax }} 
+                    > 
+                      {
+                        col.value == 'checkbox'
+                          ? <Fragment>
+                              <Checkbox 
+                                size={checkboxSize}
+                                name={`checkbox-all-${rand}`}
+                                hitboxPadding={5}
+                                checked={rows.length > 0 && selectedRowIds.length === rows.length}
+                                className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
+                                checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
+                                onChange={(e) => onSelect('all', e.target.checked)}
+                              />
+                              <div 
+                                className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[35px] [&>*]:z-10 whitespace-nowrap`}
+                              >
+                                {generateCheckboxActions && generateCheckboxActions(selectedRowIds, setSelectedRowIds)}
+                              </div>
+                            </Fragment>
+                          : <span className={twMerge(
+                              'flex items-center gap-x-2 transition-opacity',
+                              selectedRowIds.length ? 'opacity-0' : '',
+                              getAlignClass(col.align, true)
+                            )}>
+                              <span>{col.label}</span>
+                              {
+                                (!col.disableSort && sortBy == col.sortByValue) 
+                                  ? (sort == '1' 
+                                      ? <ChevronDownIcon class='shrink-0 size-[16px]' /> 
+                                      : <ChevronUpIcon class='shrink-0 size-[16px]' />
+                                    )
+                                  : col.align == 'left' && <div class='size-[16px] shrink-0' /> // prevent layout shift on sort
+                              }
+                            </span>
+                      }
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </div>
+          {/* Tbody rows */}
+          {
+            rowsToRender.map((row: T, i: number) => {
+              const isSelected = selectedRowIds.includes(row._id || '')
+              const Element = (rowLink ? Link : 'div') as React.ElementType
+              const extraProps = rowLink ? { to: rowLink(row) } : { onClick: rowOnClick ? () => rowOnClick(row) : undefined }
+              return (
+                <Element
+                  {...extraProps}
+                  key={`${row._id}-${i}`}
+                  id={`row-${row._id}-${i}`}
+                  className={twMerge(
+                    `table-row relative ${(rowOnClick || rowLink) ? 'cursor-pointer' : ''} ${isSelected ? 'is-selected' : ''}`,
+                    rowClassName,
+                    rowClassNameFn ? rowClassNameFn(row, i) : ''
+                  )}
+                >
+                  {columns.map((col, j) => {
+                    const rowType = row._id ? 'row' : isLoading ? 'loading' : 'empty'
+                    const { pl, pr, sideColor } = getColumnPadding(j, isLoading ? undefined : row, rowType)
+                    if (col.isHidden) return <Fragment key={j} />
+                    return (
+                      <div
+                        key={j}
+                        style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
                         className={twMerge(
-                          rowContentHeightMax ? 'overflow-hidden' : '',
-                          getLineClampClassName(col.rowLinesMax),
-                          col.overflow ? 'overflow-visible' : '',
-                          col.innerClassName
+                          _columnClassName,
+                          getAlignClass(col.align),
+                          columnClassName,
+                          columnClassNameFn ? columnClassNameFn(col, row, i) : '',
+                          col.className,
+                          isSelected ? `bg-gray-50 ${columnSelectedClassName||''}` : ''
                         )}
                       >
-                        {
-                          // Side color
-                          sideColor && 
-                          <div 
-                            className={`absolute top-0 left-0 h-full ${sideColor?.className||''}`} 
-                            style={{ width: sideColor.width }}
-                          />
-                        }
-                        {
-                          // Rows (content hidden when loading inline)
-                          row._id &&
-                          <div className={isLoading && showLoadingInline ? 'opacity-0 pointer-events-none' : ''}>
-                            {
-                              col.value == 'checkbox'
-                                ? <Checkbox 
-                                    size={checkboxSize} 
-                                    name={`checkbox-${row._id}`} 
-                                    onChange={(e) => onSelect(row?._id || '', e.target.checked)}
-                                    checked={selectedRowIds.includes(row?._id || '')}
-                                    onClick={(e) => e.stopPropagation()}
-                                    hitboxPadding={5}
-                                    className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
-                                    checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
-                                  />
-                                : generateTd(col, row, i, i == rows.length - 1)
-                            }
-                          </div>
-                        }
-                        {
-                          // Show "no records" or "loading" text in the first column
-                          j == 0 && (!row._id || isLoading) &&
-                          <div className={'absolute top-0 h-full flex items-center justify-center gap-3 text-sm text-gray-500'}>
-                            {
-                              (!row._id && !isLoading) ? (
-                                'No records found.' 
-                              ) : (!row._id && isLoading && showLoadingInline === true) ? (
-                                <Fragment>
-                                  <Spinner className="border-gray-500" />
-                                  <LoadingWithDots message={loadingMessage} />
-                                </Fragment>
-                              ) : (!row._id && isLoading && showLoadingInline) ? (
-                                showLoadingInline
-                              ) : null
-                            }
-                          </div>
-                        }
+                        <div 
+                          // pl:sideColorPadding was originally here
+                          style={{ maxHeight: rowContentHeightMax }} 
+                          className={twMerge(
+                            rowContentHeightMax ? 'overflow-hidden' : '',
+                            getLineClampClassName(col.rowLinesMax),
+                            col.overflow ? 'overflow-visible' : '',
+                            col.innerClassName
+                          )}
+                        >
+                          {
+                            // Side color
+                            sideColor && 
+                            <div 
+                              className={`absolute top-0 left-0 h-full ${sideColor?.className||''}`} 
+                              style={{ width: sideColor.width }}
+                            />
+                          }
+                          {
+                            // Rows (content hidden when loading inline)
+                            row._id &&
+                            <div className={isLoading && showLoadingInline ? 'opacity-0 pointer-events-none' : ''}>
+                              {
+                                col.value == 'checkbox'
+                                  ? <Checkbox 
+                                      size={checkboxSize} 
+                                      name={`checkbox-${row._id}`} 
+                                      onChange={(e) => onSelect(row?._id || '', e.target.checked)}
+                                      checked={selectedRowIds.includes(row?._id || '')}
+                                      onClick={(e) => e.stopPropagation()}
+                                      hitboxPadding={5}
+                                      className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
+                                      checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
+                                    />
+                                  : generateTd(col, row, i, i == rows.length - 1)
+                              }
+                            </div>
+                          }
+                          {
+                            // Show "no records" or "loading" text in the first column
+                            j == 0 && (!row._id || isLoading) &&
+                            <div className={'absolute top-0 h-full flex items-center justify-center gap-3 text-sm text-gray-500'}>
+                              {
+                                (!row._id && !isLoading) ? (
+                                  'No records found.' 
+                                ) : (!row._id && isLoading && showLoadingInline === true) ? (
+                                  <Fragment>
+                                    <Spinner className="border-gray-500" />
+                                    <LoadingWithDots message={loadingMessage} />
+                                  </Fragment>
+                                ) : (!row._id && isLoading && showLoadingInline) ? (
+                                  showLoadingInline
+                                ) : null
+                              }
+                            </div>
+                          }
+                        </div>
                       </div>
-                    </div>
-                  )
-                })}
-              </Element>
-            )
-          })
-        }
-        { 
-          (isLoading && showLoadingOverlay === true) 
-            ? <LoadingOverlay className={twMerge('m-[1px]', loadingOverlayClassName)} message={loadingMessage} /> 
-            : (isLoading && showLoadingOverlay) ? showLoadingOverlay : null
-        }
+                    )
+                  })}
+                </Element>
+              )
+            })
+          }
+          { 
+            (isLoading && showLoadingOverlay === true) 
+              ? <LoadingOverlay className={twMerge('m-[1px]', loadingOverlayClassName)} message={loadingMessage} /> 
+              : (isLoading && showLoadingOverlay) ? showLoadingOverlay : null
+          }
+        </div>
       </div>
     </div>
   )

package/components/partials/styleguide.tsx

@@ -220,7 +220,10 @@ export function Styleguide({ className, elements, children, currencies, groups }
       case 'actions':
         return (
           <Dropdown 
-            options={[{ label: 'Set Status' }, { label: 'Delete' }]} 
+            options={[
+              { label: 'Set Status', onClick: () => { console.log('set', row._id) } }, 
+              { label: 'Delete', onClick: () => { console.log('remove', row._id) } },
+            ]} 
             dir={rows.slice(0, perPage).length - 3 < i ? 'top-right' : 'bottom-right'} 
             minWidth={100}
           >
@@ -701,51 +704,64 @@ export function Styleguide({ className, elements, children, currencies, groups }
             />
           </div>
           <Table
-            rows={rows.slice(0, perPage)}
+            className="mb-6"
             columns={thead}
-            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
             generateCheckboxActions={generateCheckboxActions}
             generateTd={generateTd}
-            className="mb-6"
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={rows.slice(0, perPage)}
           />
           <Table
-            rows={[]}
+            className="mb-6"
             columns={thead}
-            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
             generateCheckboxActions={generateCheckboxActions}
             generateTd={generateTd}
-            className="mb-6"
             isLoading={true}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={[]}
           />
           <Table
-            rows={[]}
+            className="mb-6"
             columns={thead}
-            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
             generateCheckboxActions={generateCheckboxActions}
             generateTd={generateTd}
-            className="mb-6"
             isLoading={true}
-            showLoadingOverlay={false}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={[]}
             showLoadingInline={true}
+            showLoadingOverlay={false}
           />
           <Table
-            rows={rows.slice(0, 2).map(row => ({ ...row, _id: row._id + '1' }))}
+            className="mb-6"
             columns={thead}
-            rowLinesMax={1}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
+            rowLink={(row) => `#/table-link/${row?._id}`}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={rows.slice(0, 1).map(row => ({ ...row, _id: '1_' + row._id }))}
+          />
+          <Table
+            className="mb-6"
+            columns={thead}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
             headerHeightMin={35}
             rowGap={8}
             rowHeightMin={42}
+            rowLinesMax={1} 
+            rowOnClick={useCallback((row: QuoteExample) => {
+              console.log('row clicked', row?._id)
+              setStore((s) => ({ ...s, message: `Row ${row?._id} clicked` }))
+            }, [setStore])}
             rowSideColor={(row) => ({ className: `rounded-l-xl ${statusColors(row?.status as string)}`, width: 10 })}
-            rowOnClick={useCallback((row: QuoteExample) => {setStore((s) => ({ ...s, message: `Row ${row?._id} clicked` }))}, [setStore])}
-            generateCheckboxActions={generateCheckboxActions}
-            generateTd={generateTd}
-            className="mb-5"
-            tableClassName="rounded-3px"
-            rowClassName="[&:hover>div]:bg-gray-50"
+            rows={rows.slice(0, 2).map(row => ({ ...row, _id: '2_' + row._id }))}
+
+            checkboxClassName="rounded-[2px] shadow-none"
             columnClassName="border-t-1 first:rounded-l-xl last:rounded-r-xl"
-            columnSelectedClassName="bg-gray-50 border-indigo-300"
             columnHeaderClassName="text-gray-500 text-2xs uppercase border-none"
-            checkboxClassName="rounded-[2px] shadow-none"
+            columnSelectedClassName="bg-gray-50 border-indigo-300"
+            rowClassName="[&:hover>div]:bg-gray-50"
+            tableClassName="rounded-3px"
           />
         </div>
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",