feat(table): add new variant and property in table component

indec-it · Feb 5, 2024 · c07b7b0 · c07b7b0
1 parent c932582
commit c07b7b0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
@@ -36,6 +36,7 @@ const Table = ({
     showDefaultFooter,
     showPagination,
     total,
+    paintFreeRowsColor,
     ...props
 }) => {
     const columnsData = Array.isArray(columns) ? columns : [];
@@ -114,11 +115,16 @@ const Table = ({
                         )}
                         {!isLoading && data.length > 0 && buildRows(data, columnsData).map(row => (
                             <Tr key={row?.key} {...row?.containerStyle} data-testid={`row-${row?.key}`}>
-                                {columnsData.map(header => (
-                                    <Td key={`${row.key}-${header.key}`} {...row.style} {...header.tdStyle} >
-                                        {row[header.key]}
-                                    </Td>
-                                ))}
+                                {columnsData.map(header => {
+                                    const isEmpty = row[header.key] == null || row[header.key] === '';
+                                    const rowsStyle = isEmpty && paintFreeRowsColor !== undefined
+                                        ? {backgroundColor: `${paintFreeRowsColor}`} : (row.style || '');
+                                    return (
+                                        <Td key={`${row.key}-${header.key}`} {...rowsStyle} {...header.tdStyle}>
+                                            {row[header.key]}
+                                        </Td>
+                                    );
+                                })}
                             </Tr>
                         ))}
                     </Tbody>
@@ -140,6 +146,7 @@ const Table = ({
 };
 
 Table.propTypes = {
+    paintFreeRowsColor: PropTypes.string,
     caption: PropTypes.string,
     columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
     data: PropTypes.arrayOf(PropTypes.shape({})),
@@ -164,14 +171,15 @@ Table.defaultProps = {
     emptyMessage: 'No hay resultados',
     isLoading: false,
     name: 'table',
-    onSearch: () => {},
+    onSearch: () => { },
     onSort: undefined,
     paginationStyles: undefined,
     params: undefined,
     perPage: 0,
     showDefaultFooter: true,
     showPagination: true,
-    total: 0
+    total: 0,
+    paintFreeRowsColor: undefined
 };
 
 export default Table;
diff --git a/src/theme/components/table.js b/src/theme/components/table.js
@@ -29,6 +29,34 @@ const table = {
                 textAlign: 'left',
                 padding: '10px 20px'
             }
+        },
+        fixedFirstColumn: {
+            fontSize: '16px',
+            height: '35px',
+            table: {
+                background: 'white',
+                borderRadius: '0 0 10px 10px'
+            },
+            tr: {
+                '& th:first-of-type': {
+                    position: 'sticky',
+                    left: '0',
+                    backgroundColor: 'white'
+                },
+                '&:nth-of-type(even) td:first-of-type ': {
+                    backgroundColor: 'brand.neutral50'
+                },
+                '&:nth-of-type(odd) td:first-of-type ': {
+                    backgroundColor: 'white'
+                }
+            },
+
+            td: {
+                '&:first-of-type': {
+                    position: 'sticky',
+                    left: '0'
+                }
+            }
         }
     }
 };