@taiv/ui 1.10.1 → 1.10.2

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

@@ -11,7 +11,8 @@ 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;
+declare const Table: <T>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Table, 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,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;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA4E/G,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { Box } from '../Box/Box';
 import { fontWeight, neutral } from '../../../constants';
-const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) => {
+const Table = ({ 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],

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;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;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}

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

@@ -31,6 +31,10 @@ 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;
@@ -314,3 +318,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.2",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",