diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
index ca756e8..afbc104 100644
--- 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 => (
- {columnsData.map(header => (
-
- {row[header.key]}
- |
- ))}
+ {columnsData.map(header => {
+ const isEmpty = row[header.key] == null || row[header.key] === '';
+ const rowsStyle = isEmpty && paintFreeRowsColor !== undefined
+ ? {backgroundColor: `${paintFreeRowsColor}`} : (row.style || '');
+ return (
+
+ {row[header.key]}
+ |
+ );
+ })}
))}
@@ -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
index c1049f8..f779d75 100644
--- 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'
+ }
+ }
}
}
};