@jmruthers/pace-core 0.5.64 → 0.5.66

package/docs/api/interfaces/StorageConfig.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageConfig
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageConfig
 
 # Interface: StorageConfig
 

package/docs/api/interfaces/StorageFileInfo.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageFileInfo
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageFileInfo
 
 # Interface: StorageFileInfo
 

package/docs/api/interfaces/StorageFileMetadata.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageFileMetadata
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageFileMetadata
 
 # Interface: StorageFileMetadata
 

package/docs/api/interfaces/StorageListOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageListOptions
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageListOptions
 
 # Interface: StorageListOptions
 

package/docs/api/interfaces/StorageListResult.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageListResult
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageListResult
 
 # Interface: StorageListResult
 

package/docs/api/interfaces/StorageUploadOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageUploadOptions
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageUploadOptions
 
 # Interface: StorageUploadOptions
 

package/docs/api/interfaces/StorageUploadResult.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageUploadResult
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageUploadResult
 
 # Interface: StorageUploadResult
 

package/docs/api/interfaces/StorageUrlOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StorageUrlOptions
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StorageUrlOptions
 
 # Interface: StorageUrlOptions
 

package/docs/api/interfaces/StyleImport.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / StyleImport
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / StyleImport
 
 # Interface: StyleImport
 

package/docs/api/interfaces/ToastActionElement.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / ToastActionElement
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / ToastActionElement
 
 # Interface: ToastActionElement
 

package/docs/api/interfaces/ToastProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / ToastProps
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / ToastProps
 
 # Interface: ToastProps
 

package/docs/api/interfaces/UnifiedAuthContextType.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UnifiedAuthContextType
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UnifiedAuthContextType
 
 # Interface: UnifiedAuthContextType
 

package/docs/api/interfaces/UnifiedAuthProviderProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UnifiedAuthProviderProps
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UnifiedAuthProviderProps
 
 # Interface: UnifiedAuthProviderProps
 

package/docs/api/interfaces/UseInactivityTrackerOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UseInactivityTrackerOptions
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UseInactivityTrackerOptions
 
 # Interface: UseInactivityTrackerOptions
 

package/docs/api/interfaces/UseInactivityTrackerReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UseInactivityTrackerReturn
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UseInactivityTrackerReturn
 
 # Interface: UseInactivityTrackerReturn
 

package/docs/api/interfaces/UsePublicEventLogoOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UsePublicEventLogoOptions
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UsePublicEventLogoOptions
 
 # Interface: UsePublicEventLogoOptions
 

package/docs/api/interfaces/UsePublicEventLogoReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UsePublicEventLogoReturn
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UsePublicEventLogoReturn
 
 # Interface: UsePublicEventLogoReturn
 

package/docs/api/interfaces/UsePublicEventOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UsePublicEventOptions
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UsePublicEventOptions
 
 # Interface: UsePublicEventOptions
 

package/docs/api/interfaces/UsePublicEventReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UsePublicEventReturn
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UsePublicEventReturn
 
 # Interface: UsePublicEventReturn
 

package/docs/api/interfaces/UsePublicRouteParamsReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UsePublicRouteParamsReturn
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UsePublicRouteParamsReturn
 
 # Interface: UsePublicRouteParamsReturn
 

package/docs/api/interfaces/UserEventAccess.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UserEventAccess
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UserEventAccess
 
 # Interface: UserEventAccess
 

package/docs/api/interfaces/UserMenuProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UserMenuProps
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UserMenuProps
 
 # Interface: UserMenuProps
 

package/docs/api/interfaces/UserProfile.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.64](../README.md) / [Exports](../modules.md) / UserProfile
+[@jmruthers/pace-core - v0.5.66](../README.md) / [Exports](../modules.md) / UserProfile
 
 # Interface: UserProfile
 

package/docs/api/modules.md

@@ -1,6 +1,6 @@
-[@jmruthers/pace-core - v0.5.64](README.md) / Exports
+[@jmruthers/pace-core - v0.5.66](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.64
+# @jmruthers/pace-core - v0.5.66
 
 **`File`**
 
@@ -372,7 +372,7 @@ Generic data record type - all DataTable data must extend this
 
 #### Defined in
 
-[packages/core/src/components/DataTable/types.ts:27](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/DataTable/types.ts#L27)
+[packages/core/src/components/DataTable/types.ts:37](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/DataTable/types.ts#L37)
 
 ___
 
@@ -405,7 +405,7 @@ Row identifier function type
 
 #### Defined in
 
-[packages/core/src/components/DataTable/types.ts:32](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/DataTable/types.ts#L32)
+[packages/core/src/components/DataTable/types.ts:42](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/DataTable/types.ts#L42)
 
 ___
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.64",
+  "version": "0.5.66",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {

package/src/components/DataTable/components/DataTableBody.tsx

@@ -273,7 +273,7 @@ export function DataTableBody<TData extends Record<string, any>>({
                         aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
                         tabIndex={0}
                       >
-                        <div className="flex items-center gap-1">
+                        <div className={`flex items-center gap-1 ${header.column.columnDef.meta?.align === 'right' ? 'justify-end' : ''}`}>
                           {typeof header.column.columnDef.header === 'function'
                             ? header.column.columnDef.header(header.getContext())
                             : header.column.columnDef.header}
@@ -287,7 +287,7 @@ export function DataTableBody<TData extends Record<string, any>>({
                         </div>
                       </Button>
                     ) : (
-                      <div>
+                      <div className={header.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
                         {typeof header.column.columnDef.header === 'function'
                           ? header.column.columnDef.header(header.getContext())
                           : header.column.columnDef.header}
@@ -438,15 +438,31 @@ export function DataTableBody<TData extends Record<string, any>>({
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {isEditing && cell.column.id !== 'actions' ? (
-                    renderEditField(cell.column, editingData[cell.column.id], (value) => {
-                      if (typeof value === 'object' && value !== null) {
-                        // Handle editAccessorKey case
-                        onEditingDataChange({ ...editingData, ...value });
-                      } else {
-                        // Handle simple value case
-                        onEditingDataChange({ ...editingData, [cell.column.id]: value });
-                      }
-                    }, editingData)
+                    // Check if column has a custom cell renderer - if so, use it in edit mode
+                    cell.column.columnDef.cell ? (
+                      flexRender(cell.column.columnDef.cell, {
+                        ...cell.getContext(),
+                        getIsEditing: () => true, // Always true in edit mode
+                        setValue: (value: any) => {
+                          if (typeof value === 'object' && value !== null) {
+                            onEditingDataChange({ ...editingData, ...value });
+                          } else {
+                            onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                          }
+                        }
+                      })
+                    ) : (
+                      // Fall back to default edit field rendering when no custom cell renderer
+                      renderEditField(cell.column, editingData[cell.column.id], (value) => {
+                        if (typeof value === 'object' && value !== null) {
+                          // Handle editAccessorKey case
+                          onEditingDataChange({ ...editingData, ...value });
+                        } else {
+                          // Handle simple value case
+                          onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                        }
+                      }, editingData)
+                    )
                   ) : (
                     flexRender(cell.column.columnDef.cell, cell.getContext())
                   )}

package/src/components/DataTable/components/DataTableCore.tsx

@@ -1062,21 +1062,21 @@ function DataTableInternal<TData extends DataRecord>({
                             aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-1">
-                              {typeof header.column.columnDef.header === 'function'
-                                ? header.column.columnDef.header(header.getContext())
-                                : header.column.columnDef.header}
-                              {header.column.getIsSorted() === 'asc' ? (
-                                <ChevronUp className="h-4 w-4" />
-                              ) : header.column.getIsSorted() === 'desc' ? (
-                                <ChevronDown className="h-4 w-4" />
-                              ) : (
-                                <ChevronsUpDown className="h-4 w-4" />
-                              )}
-                            </div>
+                        <div className={`flex items-center gap-1 ${header.column.columnDef.meta?.align === 'right' ? 'justify-end' : ''}`}>
+                          {typeof header.column.columnDef.header === 'function'
+                            ? header.column.columnDef.header(header.getContext())
+                            : header.column.columnDef.header}
+                          {header.column.getIsSorted() === 'asc' ? (
+                            <ChevronUp className="h-4 w-4" />
+                          ) : header.column.getIsSorted() === 'desc' ? (
+                            <ChevronDown className="h-4 w-4" />
+                          ) : (
+                            <ChevronsUpDown className="h-4 w-4" />
+                          )}
+                        </div>
                           </Button>
                         ) : (
-                          <div>
+                          <div className={header.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
                             {typeof header.column.columnDef.header === 'function'
                               ? header.column.columnDef.header(header.getContext())
                               : header.column.columnDef.header}

package/src/components/DataTable/components/EditableRow.tsx

@@ -117,34 +117,52 @@ export function EditableRow<TData extends DataRecord>({
     <tr>
       {row.getVisibleCells().map((cell: any) => (
         <td key={cell.id}>
-          {cell.column.id !== 'actions' ? (
-                         renderEditField(cell.column, editingData[cell.column.id], (value) => {
-               if (typeof value === 'object' && value !== null) {
-                 // Handle editAccessorKey case
-                 onEditingDataChange({ ...editingData, ...value });
-               } else {
-                 // Handle simple value case
-                 onEditingDataChange({ ...editingData, [cell.column.id]: value });
-               }
-             }, editingData)
-          ) : (
-            <div className="flex gap-1">
-              <Button
-                onClick={onSave}
-                size="sm"
-                variant="default"
-              >
-                Save
-              </Button>
-              <Button
-                onClick={onCancel}
-                size="sm"
-                variant="outline"
-              >
-                Cancel
-              </Button>
-            </div>
-          )}
+          <div className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
+            {cell.column.id !== 'actions' ? (
+              // Check if column has a custom cell renderer - if so, use it in edit mode
+              cell.column.columnDef.cell ? (
+                flexRender(cell.column.columnDef.cell, {
+                  ...cell.getContext(),
+                  getIsEditing: () => true, // Always true in edit mode
+                  setValue: (value: any) => {
+                    if (typeof value === 'object' && value !== null) {
+                      onEditingDataChange({ ...editingData, ...value });
+                    } else {
+                      onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                    }
+                  }
+                })
+              ) : (
+                // Fall back to default edit field rendering when no custom cell renderer
+                renderEditField(cell.column, editingData[cell.column.id], (value) => {
+                  if (typeof value === 'object' && value !== null) {
+                    // Handle editAccessorKey case
+                    onEditingDataChange({ ...editingData, ...value });
+                  } else {
+                    // Handle simple value case
+                    onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                  }
+                }, editingData)
+              )
+            ) : (
+              <div className="flex gap-1">
+                <Button
+                  onClick={onSave}
+                  size="sm"
+                  variant="default"
+                >
+                  Save
+                </Button>
+                <Button
+                  onClick={onCancel}
+                  size="sm"
+                  variant="outline"
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
         </td>
       ))}
       {actions.length > 0 && (

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -349,36 +349,61 @@ const MemoizedRow = ({
                     className: "px-3 py-2 pl-8 whitespace-normal break-words"
                   })}
                 >
-                  {isSubRowEditing && cell.column.id !== 'actions' ? (
-                    renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                      if (typeof value === 'object' && value !== null) {
-                        onEditingDataChange?.({ ...editingData, ...value });
-                      } else {
-                        onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                      }
-                    }, editingData)
-                  ) : cell.column.id === 'actions' ? (
-                    <ActionButtons 
-                      row={row} 
-                      actions={actions}
-                      isEditing={isEditing}
-                      isParent={isParent}
-                      hierarchical={!!hierarchical}
-                      rbac={rbac}
-                      permissions={permissions}
-                    />
-                  ) : (
-                    flexRender(cell.column.columnDef.cell, {
-                      ...cell.getContext(),
-                      hierarchical: hierarchical,
-                      isParent: false,
-                      isChild: true,
-                      isHierarchical: false,
-                      rowId: subRowId,
-                      isExpanded: false,
-                      hasChildren: false
-                    })
-                  )}
+                  <div className={`${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
+                    {isSubRowEditing && cell.column.id !== 'actions' ? (
+                      // Check if column has a custom cell renderer - if so, use it in edit mode
+                      cell.column.columnDef.cell ? (
+                        flexRender(cell.column.columnDef.cell, {
+                          ...cell.getContext(),
+                          hierarchical: hierarchical,
+                          isParent: false,
+                          isChild: true,
+                          isHierarchical: false,
+                          rowId: subRowId,
+                          isExpanded: false,
+                          hasChildren: false,
+                          getIsEditing: () => true, // Always true in edit mode
+                          setValue: (value: any) => {
+                            if (typeof value === 'object' && value !== null) {
+                              onEditingDataChange?.({ ...editingData, ...value });
+                            } else {
+                              onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                            }
+                          }
+                        })
+                      ) : (
+                        // Fall back to default edit field rendering when no custom cell renderer
+                        renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
+                          if (typeof value === 'object' && value !== null) {
+                            onEditingDataChange?.({ ...editingData, ...value });
+                          } else {
+                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                          }
+                        }, editingData)
+                      )
+                    ) : cell.column.id === 'actions' ? (
+                      <ActionButtons 
+                        row={row} 
+                        actions={actions}
+                        isEditing={isEditing}
+                        isParent={isParent}
+                        hierarchical={!!hierarchical}
+                        rbac={rbac}
+                        permissions={permissions}
+                      />
+                    ) : (
+                      flexRender(cell.column.columnDef.cell, {
+                        ...cell.getContext(),
+                        hierarchical: hierarchical,
+                        isParent: false,
+                        isChild: true,
+                        isHierarchical: false,
+                        rowId: subRowId,
+                        isExpanded: false,
+                        hasChildren: false
+                      })
+                    )}
+                  </div>
                 </td>
               ))}
             </tr>
@@ -468,15 +493,38 @@ const MemoizedRow = ({
               )}
               
               {/* Cell content */}
-              <div className="flex-1">
+              <div className={`flex-1 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
                 {isEditing && cell.column.id !== 'actions' ? (
-                  renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                    if (typeof value === 'object' && value !== null) {
-                      onEditingDataChange?.({ ...editingData, ...value });
-                    } else {
-                      onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                    }
-                  }, editingData)
+                  // Check if column has a custom cell renderer - if so, use it in edit mode
+                  cell.column.columnDef.cell ? (
+                    flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      hierarchical: hierarchical,
+                      isParent: isParent,
+                      isChild: isChild,
+                      isHierarchical: isHierarchical,
+                      rowId: rowId,
+                      isExpanded: isExpanded,
+                      hasChildren: hasChildren,
+                      getIsEditing: () => true, // Always true in edit mode
+                      setValue: (value: any) => {
+                        if (typeof value === 'object' && value !== null) {
+                          onEditingDataChange?.({ ...editingData, ...value });
+                        } else {
+                          onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                        }
+                      }
+                    })
+                  ) : (
+                    // Fall back to default edit field rendering when no custom cell renderer
+                    renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
+                      if (typeof value === 'object' && value !== null) {
+                        onEditingDataChange?.({ ...editingData, ...value });
+                      } else {
+                        onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                      }
+                    }, editingData)
+                  )
                 ) : cell.column.id === 'actions' ? (
                   isEditing ? (
                     <div className="flex gap-1">

package/src/components/DataTable/components/VirtualizedDataTable.tsx

@@ -32,7 +32,9 @@ const MemoizedCell = memo(({ cell, style }: { cell: any; style?: React.CSSProper
       )}
       style={style}
     >
-      {flexRender(cell.column?.columnDef?.cell, cell.getContext?.() || {})}
+      <div className={cell.column?.columnDef?.meta?.align === 'right' ? 'text-right' : ''}>
+        {flexRender(cell.column?.columnDef?.cell, cell.getContext?.() || {})}
+      </div>
     </td>
   );
 });
@@ -185,7 +187,7 @@ export function VirtualizedDataTable<TData extends DataRecord>({
                     style={{}}
                     onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
                   >
-                    <div className="flex items-center space-x-1">
+                    <div className={`flex items-center space-x-1 ${header.column?.columnDef?.meta?.align === 'right' ? 'justify-end' : ''}`}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
@@ -413,7 +415,7 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
                     style={{}}
                     onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
                   >
-                    <div className="flex items-center space-x-1">
+                    <div className={`flex items-center space-x-1 ${header.column?.columnDef?.meta?.align === 'right' ? 'justify-end' : ''}`}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}

package/src/components/DataTable/core/ColumnFactory.ts

@@ -120,6 +120,10 @@ export class ColumnFactory<TData extends DataRecord = DataRecord> {
       size: options.size,
       minSize: options.minSize,
       maxSize: options.maxSize,
+      meta: {
+        align: 'right' as const,
+        type: 'number' as const,
+      },
     } as ColumnDef<TData>;
   }
 

package/src/components/DataTable/types.ts

@@ -17,6 +17,16 @@ import type {
 } from '@tanstack/react-table';
 import type { ImportModalConfig } from './components/ImportModal';
 
+// Extend TanStack Table types to include custom meta properties
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData, TValue> {
+    /** Text alignment for the column content */
+    align?: 'left' | 'right' | 'center';
+    /** Column type for styling purposes */
+    type?: 'text' | 'number' | 'date' | 'boolean' | 'custom';
+  }
+}
+
 // ============================================================================
 // CORE DATA TYPES
 // ============================================================================

package/src/types/index.ts

@@ -23,3 +23,5 @@ export * from './guards';
 export * from './validation';
 export * from './theme';
 export * from './security';
+
+// Type declarations are handled via module augmentation in individual files