@taiv/ui 1.10.1 → 1.10.3

package/dist/components/Layout/Table/Table.d.ts

@@ -3,7 +3,10 @@ interface ColumnConfig {
     heading?: string;
     style?: CSSProperties;
 }
-interface TableProps<T> {
+interface TableItem {
+    key: string | number;
+}
+interface TableProps<T extends TableItem> {
     columnConfigs: ColumnConfig[];
     data: T[];
     ListItem: React.ComponentType<{
@@ -11,7 +14,9 @@ interface TableProps<T> {
     }>;
     placeholder?: React.ReactNode;
     shadow?: boolean;
+    divider?: boolean;
 }
-declare const Table: <T>({ columnConfigs, data, ListItem, placeholder, shadow }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export { Table, type ColumnConfig, type TableProps };
+declare const TableComponent: <T extends TableItem>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: typeof TableComponent;
+export { type ColumnConfig, type TableProps };
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/Layout/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAIhE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU,CAAC,CAAC;IACpB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,wDAAgE,UAAU,CAAC,CAAC,CAAC,4CAsE/F,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA2B,MAAM,OAAO,CAAC;AAItE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACtC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA4EzI,CAAC;AAEF,eAAO,MAAM,KAAK,EAA2B,OAAO,cAAc,CAAC;AAEnE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/Layout/Table/Table.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import { Box } from '../Box/Box';
 import { fontWeight, neutral } from '../../../constants';
-const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) => {
+const TableComponent = ({ columnConfigs, data, ListItem, placeholder, shadow = false, divider = true }) => {
     const tableRef = useRef(null);
     /**
      * Apply column styles to the table cells.
@@ -17,7 +17,7 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
         const rows = tbody.querySelectorAll('tr');
         if (!rows || !rows.length)
             return;
-        rows.forEach((row) => {
+        rows.forEach((row, rowIndex) => {
             const cells = row.querySelectorAll('td');
             cells.forEach((cell, columnIndex) => {
                 var _a;
@@ -26,8 +26,11 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
                     Object.assign(cell.style, columnStyle);
                 }
             });
+            const showDivider = divider && rowIndex < rows.length - 1;
+            const borderStyle = { borderBottom: showDivider ? `1px solid ${neutral[100]}` : 'none' };
+            Object.assign(row.style, borderStyle);
         });
-    }, [columnConfigs, data]);
+    }, [columnConfigs, data, divider]);
     return (_jsx(Box, { sx: {
             borderTopLeftRadius: '8px',
             borderTopRightRadius: '8px',
@@ -35,6 +38,7 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
             overflow: 'hidden',
         }, children: _jsxs("table", { ref: tableRef, style: {
                 width: '100%',
+                borderCollapse: 'collapse',
             }, children: [_jsx("thead", { children: _jsx("tr", { children: columnConfigs.map((column, index) => (_jsx("th", { style: {
                                 backgroundColor: neutral[50],
                                 color: neutral[300],
@@ -43,6 +47,6 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) =
                                 paddingBottom: '9px',
                                 paddingTop: '9px',
                                 ...column.style,
-                            }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item }, String(item).slice(0, 10)))) })] }) }));
+                            }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item }, item.key))) })] }) }));
 };
-export { Table };
+export const Table = memo(TableComponent);

package/dist/components/Layout/Table/Table.stories.d.ts

@@ -10,4 +10,5 @@ export declare const StyledColumns: Story;
 export declare const TableWithPlaceholder: Story;
 export declare const TableWithoutPlaceholder: Story;
 export declare const TableWithShadow: Story;
+export declare const TableWithoutDivider: Story;
 //# sourceMappingURL=Table.stories.d.ts.map

package/dist/components/Layout/Table/Table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAyB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyPnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}

package/dist/components/Layout/Table/Table.stories.js

@@ -31,12 +31,17 @@ const meta = {
             control: { type: 'boolean' },
             description: 'Adds shadow to the table',
         },
+        divider: {
+            control: { type: 'boolean' },
+            description: 'Adds divider between rows to the table',
+        },
     },
 };
 export default meta;
 // Mock data
 const userData = [
     {
+        key: 'user-1',
         id: '1',
         name: 'John Doe',
         email: 'john.doe@example.com',
@@ -45,6 +50,7 @@ const userData = [
         lastLogin: '2024-01-15',
     },
     {
+        key: 'user-2',
         id: '2',
         name: 'Jane Smith',
         email: 'jane.smith@example.com',
@@ -53,6 +59,7 @@ const userData = [
         lastLogin: '2024-01-14',
     },
     {
+        key: 'user-3',
         id: '3',
         name: 'Bob Johnson',
         email: 'bob.johnson@example.com',
@@ -61,6 +68,7 @@ const userData = [
         lastLogin: '2024-01-10',
     },
     {
+        key: 'user-4',
         id: '4',
         name: 'Alice Williams',
         email: 'alice.williams@example.com',
@@ -71,6 +79,7 @@ const userData = [
 ];
 const productData = [
     {
+        key: 'product-1',
         id: '1',
         name: 'Premium Widget',
         category: 'Electronics',
@@ -79,6 +88,7 @@ const productData = [
         status: 'in-stock',
     },
     {
+        key: 'product-2',
         id: '2',
         name: 'Standard Widget',
         category: 'Electronics',
@@ -87,6 +97,7 @@ const productData = [
         status: 'low-stock',
     },
     {
+        key: 'product-3',
         id: '3',
         name: 'Basic Widget',
         category: 'Accessories',
@@ -95,6 +106,7 @@ const productData = [
         status: 'out-of-stock',
     },
     {
+        key: 'product-4',
         id: '4',
         name: 'Deluxe Widget',
         category: 'Electronics',
@@ -105,6 +117,7 @@ const productData = [
 ];
 const projectData = [
     {
+        key: 'project-1',
         id: '1',
         title: 'Website Redesign',
         team: ['Alice', 'Bob', 'Charlie'],
@@ -113,6 +126,7 @@ const projectData = [
         priority: 'high',
     },
     {
+        key: 'project-2',
         id: '2',
         title: 'Mobile App Update',
         team: ['David', 'Eve'],
@@ -121,6 +135,7 @@ const projectData = [
         priority: 'medium',
     },
     {
+        key: 'project-3',
         id: '3',
         title: 'API Documentation',
         team: ['Frank', 'Grace'],
@@ -314,3 +329,17 @@ export const TableWithShadow = {
         shadow: true,
     },
 };
+export const TableWithoutDivider = {
+    args: {
+        columnConfigs: [
+            { heading: 'Name', style: { width: '25%', paddingLeft: '20px', fontWeight: '600' } },
+            { heading: 'Email', style: { width: '30%', textAlign: 'left' } },
+            { heading: 'Role', style: { width: '20%', textAlign: 'center' } },
+            { heading: 'Status', style: { width: '15%', textAlign: 'center' } },
+            { heading: 'Last Login', style: { width: '10%', textAlign: 'right', paddingRight: '20px' } },
+        ],
+        data: userData,
+        ListItem: UserListItem,
+        divider: false,
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",