nitro-web 0.0.144 → 0.0.146

package/client/index.ts

@@ -26,12 +26,13 @@ export { Avatar } from '../components/partials/element/avatar'
 export { Button } from '../components/partials/element/button'
 export { Calendar, type CalendarProps } from '../components/partials/element/calendar'
 export { Dropdown, type DropdownProps, type DropdownOption } from '../components/partials/element/dropdown'
-export { Filters, type FiltersHandleType, type FilterType } from '../components/partials/element/filters'
+export { Filters, type FiltersHandleType, type FilterType, usePushChangesToPath } from '../components/partials/element/filters'
 export { GithubLink } from '../components/partials/element/github-link'
 export { Initials } from '../components/partials/element/initials'
 export { Message } from '../components/partials/element/message'
 export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
+export { TimePicker, type TimePickerProps } from '../components/partials/element/timepicker'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
 export { Table, type TableColumn, type TableProps, type TableRow, type TableRowType } from '../components/partials/element/table'
@@ -42,10 +43,9 @@ export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
 export { Field, isFieldCached, type FieldProps } from '../components/partials/form/field'
-export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
-export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
-export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
-export { FieldTime, type FieldTimeProps } from '../components/partials/form/field-time'
+export { type FieldColorProps } from '../components/partials/form/field-color'
+export { type FieldCurrencyProps } from '../components/partials/form/field-currency'
+export { type FieldDateProps } from '../components/partials/form/field-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle, type SelectProps, type SelectOption } from '../components/partials/form/select'
 

package/components/partials/element/calendar.tsx

@@ -1,79 +1,100 @@
-import { DayPicker, getDefaultClassNames, DayPickerProps as DayPickerPropsBase } from 'react-day-picker'
+import { DayPicker, getDefaultClassNames, DayPickerProps as DayPickerPropsBase, TZDate } from 'react-day-picker'
 import { isValid } from 'date-fns'
 import 'react-day-picker/style.css'
 import { IsFirstRender } from 'nitro-web'
 
 export const dayButtonClassName = 'size-[33px] text-sm'
 
+type Timestamp = null | number
+type TimestampArray = null | Timestamp[]
 type Mode = 'single'|'multiple'|'range'
-type ModeSelection<T extends Mode> = (
+type DayPickerSelection<T extends Mode> = (
   T extends 'single' ? Date | undefined
   : T extends 'multiple' ? Date[]
   : { from?: Date; to?: Date }
 )
+
 export type DayPickerProps = Omit<DayPickerPropsBase, 
   'mode' | 'selected' | 'onSelect' | 'modifiersClassNames' | 'classNames' | 'numberOfMonths'  | 'month' | 'onMonthChange'>
 
-export type CalendarProps = DayPickerProps & {
-  mode?: Mode
-  onChange?: (value: null|number|(null|number)[]) => void
-  value?: null|number|string|(null|number|string)[]
+type PreCalendarProps = DayPickerProps & {
   numberOfMonths?: number
-  month?: number // the value may be updated from an outside source, thus the month may have changed
+  /** month to display in the calendar (the value may be updated from an outside source, thus the month may have changed) */
+  month?: number 
   className?: string
-  preserveTime?: boolean // just for single mode
+  /** single mode only: preserve the time of the original date if needed */
+  preserveTime?: boolean 
+  /** timezone to display and set the dates in for the calendar (output always a timestamp) */
+  tz?: string 
+}
+
+// Discriminated union types based on mode
+type CalendarPropsSingle = PreCalendarProps & {
+  mode: 'single'
+  onChange?: (value: Timestamp) => void
+  value?: Timestamp // gracefully handles falsey values
 }
 
-export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime, 
-  ...props }: CalendarProps) {
+type CalendarPropsMultiple = PreCalendarProps & {
+  mode: 'multiple' | 'range'
+  onChange?: (value: TimestampArray) => void
+  value?: TimestampArray // gracefully handles falsey values
+}
+
+export type CalendarProps = CalendarPropsSingle | CalendarPropsMultiple
+
+export function Calendar({ value, numberOfMonths, month: monthProp, className, preserveTime, tz, ...props }: CalendarProps) {
   const isFirstRender = IsFirstRender()
-  const isRange = mode == 'range'
+  const isRange = props.mode == 'range'
 
-  // Convert the value to an array of valid* dates
-  const dates = useMemo(() => {
-    const _dates = Array.isArray(value) ? value : [value]
-    return _dates.map(date => isValid(date) ? new Date(date as number) : undefined) ////change to null
+  // Convert the value to an array of valid dates
+  const internalValue = useMemo(() => {
+    const _dates = value ? (Array.isArray(value) ? value : [value]) : []
+    return _dates.map(date => date && isValid(date) ? new TZDate(date, tz) : undefined)// DayPicker uses undefined (allgood, we output null)
   }, [value])
 
   // Hold the month in state to control the calendar when the input changes
-  const [month, setMonth] = useState(dates[0])
+  const [month, setMonth] = useState(internalValue[0] as Date)
 
   // Update the month if its changed from an outside source
   useEffect(() => {
-    if (!isFirstRender && monthProp) setMonth(new Date(monthProp))
+    if (!isFirstRender && monthProp) setMonth(new TZDate(monthProp, tz))
   }, [monthProp])
 
-  function handleDayPickerSelect<T extends Mode>(newDate: ModeSelection<T>) {
-    switch (mode as T) {
+  function handleDayPickerSelect(value: DayPickerSelection<CalendarProps['mode']>) {
+    switch (props.mode) {
       case 'single': {
-        const date = newDate as ModeSelection<'single'>
-        preserveTimeFn(date)
-        onChange?.(date?.getTime() ?? null)
+        const date = preserveTimeFn(value as DayPickerSelection<'single'>)
+        props.onChange?.(date ? date.getTime() : null)
         break
       }
       case 'range': {
-        const { from, to } = (newDate ?? {}) as ModeSelection<'range'>
-        onChange?.(from ? [from.getTime() || null, to?.getTime() || null] : null)
+        const { from, to } = (value ?? {}) as DayPickerSelection<'range'>
+        props.onChange?.(from ? [from.getTime() || null, to?.getTime() || null] : null)
         break
       }
       case 'multiple': {
-        const dates = (newDate as ModeSelection<'multiple'>)?.filter(Boolean) ?? []
-        onChange?.(dates.map((d) => d.getTime()))
+        const dates = (value as DayPickerSelection<'multiple'>)?.filter(Boolean)
+        props.onChange?.(dates.length ? dates.map((d) => d.getTime()) : null)
         break
       }
     }
   }
 
-  function preserveTimeFn(date?: Date) {      
-    // Preserve time from the original date if needed
-    if (preserveTime && dates[0] && date) {
-      const originalDate = dates[0]
-      date.setHours(
-        originalDate.getHours(),
-        originalDate.getMinutes(),
-        originalDate.getSeconds(),
-        originalDate.getMilliseconds()
+  function preserveTimeFn(newDate?: Date) {      
+    // Preserve time from the original date if needed. Since internalValue[0] is a TZDate object, we need to make sure the 
+    // new date is also a TZDate object in the same timezone.
+    if (newDate && preserveTime && internalValue[0]) {
+      const tzDate = new TZDate(newDate, tz)
+      tzDate.setHours(
+        internalValue[0].getHours(),
+        internalValue[0].getMinutes(),
+        internalValue[0].getSeconds(),
+        internalValue[0].getMilliseconds()
       )
+      return tzDate
+    } else {
+      return newDate
     }
   }
   
@@ -83,6 +104,7 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
     onMonthChange: setMonth,
     onSelect: handleDayPickerSelect,
     numberOfMonths: numberOfMonths || (isRange ? 2 : 1),
+    timeZone: tz,
     modifiersClassNames: {
       // Add a class without _, TW seems to replace this with a space in the css definition, e.g. &:not(.range middle)
       range_middle: `${d.range_middle} rangemiddle`,
@@ -115,12 +137,13 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
   return (
     <div>
       {
-        mode === 'single' ? (
-          <DayPicker  {...props} {...common} mode="single" selected={dates[0]} className={className} />
-        ) : mode === 'range' ? (
-          <DayPicker {...props} {...common} mode="range" selected={{ from: dates[0], to: dates[1] }} className={className} />
+        props.mode === 'single' ? (
+          <DayPicker  {...props} {...common} mode="single" selected={internalValue[0]} className={className} />
+        ) : props.mode === 'range' ? (
+          <DayPicker {...props} {...common} mode="range" selected={{ from: internalValue[0], to: internalValue[1] }} 
+            className={className} />
         ) : (
-          <DayPicker {...props} {...common} mode="multiple" selected={dates.filter((d) => !!d)} className={className} />
+          <DayPicker {...props} {...common} mode="multiple" selected={internalValue.filter((d) => !!d)} className={className} />
         )
       }
     </div>

package/components/partials/element/filters.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, Dispatch, SetStateAction, useRef, useEffect, useImperativeHandle } from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Dispatch, SetStateAction, useRef, useEffect, useLayoutEffect } from 'react'
 import { Button, Dropdown, Field, Select, type FieldProps, type SelectProps } from 'nitro-web'
 import { camelCaseToTitle, debounce, omit, queryString, queryObject, twMerge } from 'nitro-web/util'
 import { ListFilterIcon } from 'lucide-react'
@@ -14,10 +15,11 @@ export type FilterType = (
 )
 
 type FilterState = {
-  [key: string]: string|true|(string|true)[] // aka queryObject
+  [key: string]: unknown
 }
 
 type FiltersProps = {
+  /** State passed to the component, values must be processed, i.e. real numbers for dates, etc. */
   state?: FilterState
   setState?: Dispatch<SetStateAction<FilterState>>
   filters?: FilterType[]
@@ -41,26 +43,23 @@ export type FiltersHandleType = {
 
 const debounceTime = 250
 
-export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({ 
+export function Filters({ 
   filters, 
   setState: setStateProp,
-  state: stateProp,
+  state: stateProp, // state passed
   buttonProps,
   buttonCounterClassName,
   buttonText, 
   dropdownProps, 
   dropdownFiltersClassName,
   elements,
-}, ref) => {
+}: FiltersProps) {
   const location = useLocation()
-  const navigate = useNavigate()
   const [lastUpdated, setLastUpdated] = useState(0)
-  const [debouncedSubmit] = useState(() => debounce(submit, debounceTime))
-  const [stateDefault, setStateDefault] = useState(() => ({ ...queryObject(location.search) }))
+  const [stateDefault, setStateDefault] = useState<FilterState>(() => processState({ ...queryObject(location.search) }, filters))
   const [state, setState] = [stateProp || stateDefault, setStateProp || setStateDefault]
-  const stateRef = useRef(state)
-  const locationRef = useRef(location)
   const count = useMemo(() => Object.keys(state).filter((k) => state[k] && filters?.some((f) => f.name === k)).length, [state, filters])
+  const pushChangesToPath = usePushChangesToPath(state)
 
   const Elements = {
     Button: elements?.Button || Button,
@@ -69,29 +68,11 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     Select: elements?.Select || Select,
     FilterIcon: elements?.FilterIcon || ListFilterIcon,
   }
-
-  useImperativeHandle(ref, () => ({
-    submit: debouncedSubmit,
-  }))
-  
-  useEffect(() => {
-    return () => debouncedSubmit.cancel()
-  }, [])
   
-  useEffect(() => {
-    stateRef.current = state
-  }, [state])
-  
-  useEffect(() => {
-    locationRef.current = location
-  }, [location])
-
-  useEffect(() => {
-    // Only update the state if the filters haven't been input changed in the last 500ms
+  useLayoutEffect(() => {
+    // Only update the state if the filters haven't been input changed in the last 500ms (calls initially since lastUpdated is 0)
     if (Date.now() - lastUpdated > (debounceTime + 250)) {
-      setState(() => ({
-        ...queryObject(location.search),
-      }))
+      setState(() => processState({ ...queryObject(location.search) }, filters))
     }
   }, [location.search])
 
@@ -110,21 +91,15 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
   async function onInputChange(e: {target: {name: string, value: unknown}}) {
     // console.log('onInputChange', e.target.name, e.target.value)
     // the state is flattened for the query string, so here we se full paths as the key names e.g. 'job.location': '10')
-    setState((s) => ({ ...s, [e.target.name]: e.target.value as string })) 
+    setState((s) => ({ ...s, [e.target.name]: e.target.value as unknown })) 
     onAfterChange()
   }
 
   function onAfterChange() {
     setLastUpdated(Date.now())
-    debouncedSubmit()
+    pushChangesToPath()
   }
 
-  // Update the URL by replacing the current entry in the history stack
-  function submit(includePagination?: boolean) {
-    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
-    navigate(locationRef.current.pathname + queryStr, { replace: true })
-  }
-  
   function getBasisWidth(width: 'full' | 'half' | 'third' | 'quarter' | 'fifth') {
     // Need to splay out the classnames for tailwind to work
     if (width == 'full') return 'w-full'
@@ -134,6 +109,40 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     else if (width == 'fifth') return 'shrink basis-[calc(20%-8px)]'
   }
 
+  function processState(state: FilterState, filters: FilterType[]|undefined) {
+    // Since queryObject returns a string|true|(string|true)[], we need to parse the values to the correct type for the Fields/Selects
+    const output: FilterState = {...state}
+    for (const filter of filters || []) {
+      const name = filter.name
+      // Undefined values
+      if (typeof state[name] === 'undefined') {
+        output[name] = undefined
+      
+      // Date single needs to be null|string
+      } else if (filter.type === 'date' && (filter.mode === 'single' || filter.mode === 'time')) {
+        output[name] = parseDateValue(state[name], name)
+
+      } else if (filter.type === 'date' && (filter.mode === 'range' || filter.mode === 'multiple')) {
+        if (!state[name]) state[name] = undefined
+        else if (!Array.isArray(state[name])) console.error(`The "${name}" filter expected an array, received:`, state[name])
+        else output[name] = state[name].map((v, i) => parseDateValue(v, name + '.' + i))
+
+      // Remaining filters should accept text values
+      } else {
+        output[filter.name] = state[filter.name] + ''
+      }
+    }
+    return output
+  }
+
+  function parseDateValue(input: unknown, name: string) {
+    const number = parseFloat(input + '')
+    if (typeof input === 'undefined') return undefined
+    else if (input === null) return null
+    if (isNaN(number)) console.error(`The "${name}" filter expected a number, received:`, input)
+    else return number
+  }
+
   return (
     <Elements.Dropdown 
       // menuIsOpen={true}
@@ -153,35 +162,26 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
           </div> */}
           <div class={twMerge(`flex flex-wrap gap-[16px] p-[16px] pb-6 ${dropdownFiltersClassName || ''}`)}>
             {
-              filters?.map(({label, width='full', rowClassName, ...filter}, i) => (
-                <div key={i} class={twMerge(getBasisWidth(width), rowClassName || '')}>
-                  <div class="flex justify-between"> 
-                    <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
-                    <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
+              filters?.map(({label, width='full', rowClassName, ...filter}, i) => {
+                // `filter.name` is a full path e.g. 'job.location', not just the key `location`
+                const common = { className: '!mb-0', onChange: onInputChange  }
+                return (
+                  <div key={i} class={twMerge(getBasisWidth(width), rowClassName || '')}>
+                    <div class="flex justify-between"> 
+                      <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
+                      <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
+                    </div>
+                    {
+                      // Note: ignore typings for field, it has been sanitised in processState()
+                      filter.type === 'select' 
+                        ? <Elements.Select {...filter} {...common} value={state[filter.name] ?? ''} type={undefined} />
+                        : filter.type === 'date' 
+                          ? <Elements.Field {...filter} {...common} value={state[filter.name] as null ?? null} /> 
+                          : <Elements.Field {...filter} {...common} value={state[filter.name] as string ?? ''} />
+                    }
                   </div>
-                  {
-                    filter.type === 'select' && 
-                    <Elements.Select
-                      {...filter}
-                      class="!mb-0"
-                      // `filter.name` is a full path e.g. 'job.location', not just the key `location`
-                      value={typeof state[filter.name] === 'undefined' ? '' : state[filter.name]} 
-                      onChange={onInputChange}
-                      type={undefined}
-                    />
-                  }
-                  {
-                    filter.type !== 'select' && 
-                    <Elements.Field
-                      {...filter}
-                      class="!mb-0"
-                      // `filter.name` is a full path e.g. 'job.location', not just the key `location`
-                      value={typeof state[filter.name] === 'undefined' ? '' : state[filter.name] as string} 
-                      onChange={onInputChange}
-                    />
-                  }
-                </div>
-              ))
+                )
+              })
             }
           </div>
         </div>
@@ -207,6 +207,35 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
       </Elements.Button>
     </Elements.Dropdown>
   )
-})
+}
 
-Filters.displayName = 'Filters'
+Filters.displayName = 'Filters'
+
+export function usePushChangesToPath(state: { [key: string]: unknown }) {
+  // Return a debounced function which updates the query path using the state
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [debouncedPush] = useState(() => debounce(push, debounceTime))
+  const stateRef = useRef(state)
+  const locationRef = useRef(location)
+
+  useEffect(() => {
+    locationRef.current = location
+  }, [location])
+
+  useEffect(() => {
+    return () => debouncedPush.cancel()
+  }, [])
+
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  // Update the URL by replacing the current entry in the history stack
+  function push(includePagination?: boolean) {
+    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
+    navigate(locationRef.current.pathname + queryStr, { replace: true })
+  }
+
+  return debouncedPush
+}

package/components/partials/element/table.tsx

@@ -1,6 +1,7 @@
-import { JSX, useState, useCallback, Fragment } from 'react'
+import { JSX, useState, useCallback, Fragment, useMemo, useEffect } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
 import { Checkbox, queryObject, queryString, twMerge } from 'nitro-web'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 export type TableRowType = 'row' | 'loading' | 'empty' | 'thead'
 
@@ -78,6 +79,11 @@ export function Table<T extends TableRow>({
     'first:border-l last:border-r border-t-0 box-border'
   const [rand] = useState(() => new Date().getTime() + Math.random())
 
+  const rowsToRender = useMemo(() => {
+    // 1) Only show the first row when loading (content hidden), 2) an empty row when there are no records, or all rows
+    return rows.length > 0 ? (isLoading ? rows.slice(0, 1) : rows) : [{ _id: '' }] as unknown as T[]
+  }, [rows, isLoading])
+
   const columns = useMemo(() => {
     const checkboxCol: TableColumn = { value: 'checkbox', label: '', disableSort: true }
     const cols = (generateCheckboxActions ? [checkboxCol, ...columnsProp] : columnsProp).map((col, _i) => ({
@@ -92,7 +98,7 @@ export function Table<T extends TableRow>({
 
   const onSelect = useCallback((idOrAll: string, checked: boolean) => {
     setSelectedRowIds((o) => {
-      if (idOrAll == 'all' && checked) return (rows ?? []).map(row => row?._id||'')
+      if (idOrAll == 'all' && checked) return (rows ?? []).map(row => row._id || '')
       else if (idOrAll == 'all' && !checked) return []
       else if (o.includes(idOrAll) && !checked) return o.filter(id => id != idOrAll)
       else if (!o.includes(idOrAll) && checked) return [...o, idOrAll]
@@ -106,7 +112,7 @@ export function Table<T extends TableRow>({
   }, [])
 
   // Reset selected rows when the location changes, or the number of rows changed (e.g. when a row is removed)
-  useEffect(() => setSelectedRowIds([]), [location.key, (rows ?? []).map(row => row?._id||'').join(',')])
+  useEffect(() => setSelectedRowIds([]), [location.key, (rows ?? []).map(row => row._id || '').join(',')])
 
   // --- Sorting ---
 
@@ -124,8 +130,8 @@ export function Table<T extends TableRow>({
     navigate(location.pathname + queryStr, { replace: true })
   }, [location.pathname, query, sort, sortBy])
 
-  const getColumnPadding = useCallback((j: number, row: T|undefined, type: TableRowType) => {
-    const sideColor = j == 0 && rowSideColor ? rowSideColor(row, type) : undefined
+  const getColumnPadding = useCallback((j: number, row: T|undefined, rowType: TableRowType) => {
+    const sideColor = j == 0 && rowSideColor ? rowSideColor(row, rowType) : undefined
     const sideColorPadding = sideColor /*&& rows.length > 0*/ ? sideColor.width + 5 : 0
     const pl = sideColorPadding + (j == 0 ? columnPaddingX : columnGap)
     const pr = j == columns.length - 1 ? columnPaddingX : columnGap
@@ -214,8 +220,8 @@ export function Table<T extends TableRow>({
         </div>
         {/* Tbody rows */}
         {
-          !isLoading && rows.map((row: T, i: number) => {
-            const isSelected = selectedRowIds.includes(row?._id||'')
+          rowsToRender.map((row: T, i: number) => {
+            const isSelected = selectedRowIds.includes(row._id || '')
             return (
               <div 
                 key={`${row._id}-${i}`}
@@ -227,7 +233,8 @@ export function Table<T extends TableRow>({
               >
                 {
                   columns.map((col, j) => {
-                    const { pl, pr, sideColor } = getColumnPadding(j, row, 'row')
+                    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
@@ -260,18 +267,31 @@ export function Table<T extends TableRow>({
                             />
                           }
                           {
-                            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)
+                            // Rows (content hidden when loading)
+                            row._id &&
+                            <div className={isLoading ? '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 "loading" or "no records" text in the first column
+                            j == 0 && (isLoading || !row._id) &&
+                            <div className={'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500'}>
+                              { isLoading ? <>Loading<span className="relative ml-[2px] loading-dots" /></> : 'No records found.' }
+                            </div>
                           }
                         </div>
                       </div>
@@ -282,39 +302,6 @@ export function Table<T extends TableRow>({
             )
           })
         }
-        {
-          (isLoading || rows.length == 0) &&
-          <div className='table-row relative'>
-            {
-              columns.map((col, j) => {
-                const { pl, pr, sideColor } = getColumnPadding(j, undefined, isLoading ? 'loading' : 'empty')
-                return (
-                  <div
-                    key={j}
-                    style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
-                    className={twMerge(_columnClassName, columnClassName, col.className)}
-                  >
-                    {
-                      sideColor && 
-                      <div 
-                        className={`absolute top-0 left-0 h-full ${sideColor?.className||''}`} 
-                        style={{ width: sideColor.width }}
-                      />
-                    }
-                    <div
-                      className={twMerge(
-                        'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500',
-                        col.innerClassName
-                      )}
-                    >
-                      { j == 0 && (isLoading ? <>Loading<span className="relative ml-[2px] loading-dots" /></> : 'No records found.') }
-                    </div>
-                  </div>
-                )
-              })
-            }
-          </div>
-        }
       </div>
     </div>
   )