@paubox/ui 1.17.0 → 1.18.1

package/index.esm.js

@@ -30276,7 +30276,7 @@ var Pagination = function(param) {
                                     /*#__PURE__*/ jsx(Typography, {
                                         variant: "paragraph300Regular",
                                         as: "span",
-                                        children: pageInfo.pageCount
+                                        children: formatNumber(pageInfo.pageCount)
                                     })
                                 ]
                             }),
@@ -34848,7 +34848,9 @@ var TableHeader = function(param) {
                     ];
                     var columnDef = header === null || header === void 0 ? void 0 : (_header_column = header.column) === null || _header_column === void 0 ? void 0 : _header_column.columnDef;
                     var autoWidth = !!columnDef.autoWidth;
+                    var align = columnDef.align;
                     var isFixed = actionHeaders.includes(header.id);
+                    var justifyContent = align === 'right' ? 'flex-end' : align === 'center' ? 'center' : undefined;
                     return /*#__PURE__*/ jsxs(Th, {
                         variant: "paragraph200Semibold",
                         as: "th",
@@ -34856,6 +34858,7 @@ var TableHeader = function(param) {
                             width: autoWidth ? 'auto' : "".concat(header.getSize(), "px"),
                             minWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
                             maxWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
+                            textAlign: align,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: [
@@ -34864,7 +34867,8 @@ var TableHeader = function(param) {
                                 onClick: !disableControls ? header.column.getToggleSortingHandler() : undefined,
                                 style: {
                                     width: (actionHeaders === null || actionHeaders === void 0 ? void 0 : actionHeaders.includes(header === null || header === void 0 ? void 0 : header.id)) ? "".concat(header.getSize(), "px") : '100%',
-                                    cursor: header.column.getCanSort() ? 'pointer' : 'default'
+                                    cursor: header.column.getCanSort() ? 'pointer' : 'default',
+                                    justifyContent: justifyContent
                                 },
                                 "data-testid": header.column.getCanSort() ? "".concat(testId, "-column-header-").concat(formatForId(header.id), "-sort-button") : undefined,
                                 children: [
@@ -35051,6 +35055,7 @@ var TableBody = function(param) {
                     var overflow = columnDef.overflow;
                     var maxLines = columnDef.maxLines;
                     var autoWidth = columnDef.autoWidth;
+                    var align = columnDef.align;
                     var isFixed = cell.column.id === 'row-select' || cell.column.id === 'context';
                     var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
                     return /*#__PURE__*/ jsx(Td, {
@@ -35062,6 +35067,7 @@ var TableBody = function(param) {
                             width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
                             minWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
                             maxWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
+                            textAlign: align,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "1.17.0",
+  "version": "1.18.1",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Table/Table.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties, HTMLProps, ReactNode } from 'react';
 import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
 import { PageInfoPageBased, PageInfoCursorBased } from '../Pagination/Pagination';
 export type CellOverflow = 'truncate' | 'wrap' | 'clamp';
+export type ColumnAlign = 'left' | 'right' | 'center';
 export declare const TableContainer: import("@emotion/styled").StyledComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@theme").Theme;
 }, {}, {}>;
@@ -18,6 +19,7 @@ export type TableColumn<T> = ColumnDef<T> & {
     autoWidth?: boolean;
     overflow?: CellOverflow;
     maxLines?: number;
+    align?: ColumnAlign;
 };
 export interface RowSelectState {
     [x: string]: boolean;