nitro-web 0.0.133 → 0.0.135

package/client/index.ts

@@ -34,7 +34,7 @@ export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
-export { Table, type TableColumn, type TableProps, type TableRow } from '../components/partials/element/table'
+export { Table, type TableColumn, type TableProps, type TableRow, type TableRowType } from '../components/partials/element/table'
 
 // Component Form Elements
 export { Checkbox } from '../components/partials/form/checkbox'

package/components/partials/element/table.tsx

@@ -2,6 +2,8 @@ import { JSX, useState, useCallback, Fragment } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
 import { Checkbox, queryObject, queryString, twMerge } from 'nitro-web'
 
+export type TableRowType = 'row' | 'loading' | 'empty' | 'thead'
+
 export interface TableColumn {
   label: string
   value: string
@@ -20,7 +22,6 @@ export interface TableColumn {
 export type TableRow = {
   _id?: string
 }
-  
 export type TableProps<T> = {
   columns: TableColumn[]
   rows: T[]
@@ -30,7 +31,7 @@ export type TableProps<T> = {
   rowHeightMin?: number
   rowContentHeightMax?: number
   rowLinesMax?: number
-  rowSideColor?: (row?: T) => { className: string, width: number }
+  rowSideColor?: (row: T|undefined, type: TableRowType) => { className: string, width: number }
   rowGap?: number
   rowOnClick?: (row: T) => void
   columnGap?: number
@@ -123,6 +124,14 @@ 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 sideColorPadding = sideColor /*&& rows.length > 0*/ ? sideColor.width + 5 : 0
+    const pl = sideColorPadding + (j == 0 ? columnPaddingX : columnGap)
+    const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+    return { pl, pr, sideColor }
+  }, [rowSideColor, columnPaddingX, columnGap])
+
   return (
     <div 
       style={{ marginTop: -rowGap }}
@@ -137,10 +146,7 @@ export function Table<T extends TableRow>({
           {
             columns.map((col, j) => {
               const disableSort = col.disableSort || selectedRowIds.length
-              const sideColor = j == 0 && rowSideColor ? rowSideColor(undefined) : 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
+              const { pl, pr } = getColumnPadding(j, undefined, 'thead')
 
               if (col.isHidden) return <Fragment key={j} />
               return (
@@ -208,7 +214,7 @@ export function Table<T extends TableRow>({
         </div>
         {/* Tbody rows */}
         {
-          rows.map((row: T, i: number) => {
+          !isLoading && rows.map((row: T, i: number) => {
             const isSelected = selectedRowIds.includes(row?._id||'')
             return (
               <div 
@@ -221,10 +227,7 @@ export function Table<T extends TableRow>({
               >
                 {
                   columns.map((col, j) => {
-                    const sideColor = j == 0 && rowSideColor ? rowSideColor(row) : undefined
-                    const pl = j == 0 ? columnPaddingX : columnGap
-                    const pr = j == columns.length - 1 ? columnPaddingX : columnGap
-
+                    const { pl, pr, sideColor } = getColumnPadding(j, row, 'row')
                     if (col.isHidden) return <Fragment key={j} />
                     return (
                       <div
@@ -239,10 +242,8 @@ export function Table<T extends TableRow>({
                         )}
                       >
                         <div 
-                          style={{ 
-                            maxHeight: rowContentHeightMax, 
-                            paddingLeft: sideColor ? sideColor.width + 5 : 0,
-                          }}
+                          // pl:sideColorPadding was originally here
+                          style={{ maxHeight: rowContentHeightMax }} 
                           className={twMerge(
                             rowContentHeightMax ? 'overflow-hidden' : '',
                             getLineClampClassName(col.rowLinesMax),
@@ -282,22 +283,27 @@ export function Table<T extends TableRow>({
           })
         }
         {
-          rows.length == 0 &&
+          (isLoading || rows.length == 0) &&
           <div className='table-row relative'>
             {
               columns.map((col, j) => {
-                const pl = j == 0 ? columnPaddingX : columnGap
-                const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+                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',
-                        isLoading ? '' : 'text-gray-500',
+                        'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500',
                         col.innerClassName
                       )}
                     >
@@ -322,4 +328,4 @@ function getLineClampClassName(num?: number) {
   else if (num == 4) return 'line-clamp-4'
   else if (num == 5) return 'line-clamp-5'
   else if (num == 6) return 'line-clamp-6'
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.133",
+  "version": "0.0.135",
   "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 🚀",