diff --git a/packages/core/src/Table/Table.js b/packages/core/src/Table/Table.js
index dea9c4f083..33417c1d5a 100644
--- a/packages/core/src/Table/Table.js
+++ b/packages/core/src/Table/Table.js
@@ -1,6 +1,7 @@
import React from 'react'
import css from 'styled-jsx/css'
import propTypes from '@dhis2/prop-types'
+import { Provider } from './TableContext.js'
const tableStyles = css`
table {
@@ -20,12 +21,19 @@ const tableStyles = css`
* @example import { Table } from '@dhis2/ui-core'
* @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook}
*/
-export const Table = ({ children, className, dataTest }) => (
-
- {children}
+export const Table = ({
+ children,
+ className,
+ dataTest,
+ suppressZebraStriping,
+}) => (
+
+
+
+
+
)
Table.defaultProps = {
@@ -38,9 +46,11 @@ Table.defaultProps = {
* @prop {TableHead|TableBody|TableFoot|Array.} [children]
* @prop {string} [className]
* @prop {string} [dataTest]
+ * @prop {bool} [suppressZebraStriping]
*/
Table.propTypes = {
children: propTypes.node,
className: propTypes.string,
dataTest: propTypes.string,
+ suppressZebraStriping: propTypes.bool,
}
diff --git a/packages/core/src/Table/TableContext.js b/packages/core/src/Table/TableContext.js
new file mode 100644
index 0000000000..cfa8aeb942
--- /dev/null
+++ b/packages/core/src/Table/TableContext.js
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export const TableContext = createContext({
+ suppressZebraStriping: false,
+})
+
+export const { Consumer, Provider } = TableContext
diff --git a/packages/core/src/Table/TableRow.js b/packages/core/src/Table/TableRow.js
index f617f2199f..e71329ce3c 100644
--- a/packages/core/src/Table/TableRow.js
+++ b/packages/core/src/Table/TableRow.js
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useContext } from 'react'
import css from 'styled-jsx/css'
import propTypes from '@dhis2/prop-types'
+import cx from 'classnames'
+import { TableContext } from './TableContext'
const tableRowStyles = css`
- tr:nth-child(even) {
+ .zebraStriping:nth-child(even) {
background: #fbfcfd;
}
`
@@ -15,13 +17,29 @@ const tableRowStyles = css`
* @example import { TableRow } from '@dhis2/ui-core'
* @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook}
*/
-export const TableRow = ({ children, className, dataTest }) => (
-
- {children}
+export const TableRow = ({
+ children,
+ className,
+ dataTest,
+ suppressZebraStriping,
+}) => {
+ const {
+ suppressZebraStriping: suppressZebraStripingFromContext,
+ } = useContext(TableContext)
-
-
-)
+ const zebraStriping =
+ typeof suppressZebraStriping !== 'undefined'
+ ? !suppressZebraStriping
+ : !suppressZebraStripingFromContext
+
+ return (
+
+ {children}
+
+
+
+ )
+}
TableRow.defaultProps = {
dataTest: 'dhis2-uicore-tablerow',
@@ -38,4 +56,5 @@ TableRow.propTypes = {
children: propTypes.node,
className: propTypes.string,
dataTest: propTypes.string,
+ suppressZebraStriping: propTypes.bool,
}
diff --git a/packages/core/src/Table/TableRowHead.js b/packages/core/src/Table/TableRowHead.js
index b1a6e37526..6d73386b80 100644
--- a/packages/core/src/Table/TableRowHead.js
+++ b/packages/core/src/Table/TableRowHead.js
@@ -11,8 +11,17 @@ import { TableRow } from './TableRow.js'
* @example import { TableRowHead } from '@dhis2/ui-core'
* @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook}
*/
-export const TableRowHead = ({ children, className, dataTest }) => (
-
+export const TableRowHead = ({
+ children,
+ className,
+ dataTest,
+ suppressZebraStriping,
+}) => (
+
{children}
)
@@ -32,4 +41,5 @@ TableRowHead.propTypes = {
children: propTypes.node,
className: propTypes.string,
dataTest: propTypes.string,
+ suppressZebraStriping: propTypes.bool,
}