diff --git a/src/components/pivottable-ui/VPivottableUi.vue b/src/components/pivottable-ui/VPivottableUi.vue
index cdafbf5..e01105d 100644
--- a/src/components/pivottable-ui/VPivottableUi.vue
+++ b/src/components/pivottable-ui/VPivottableUi.vue
@@ -113,7 +113,7 @@ import VDragAndDropCell from './VDragAndDropCell.vue'
 import { VPivottable } from '@/'
 import { computed, ref, toRefs, watch } from 'vue'
 import { usePropsState, useMaterializeInput } from '@/composables'
-import TableRenderer from '../pivottable/renderer/index'
+import TableRenderer from '../pivottable/renderer'
 
 const props = defineProps({
   ...defaultProps,
@@ -224,6 +224,13 @@ const onUpdateValueFilter = ({ attribute, valueFilter }) => {
 }
 const onUpdateRendererName = rendererName => {
   updateState('rendererName', rendererName)
+  if (rendererName === 'Table Heatmap') {
+    updateState('heatmapMode', 'full')
+  } else if (rendererName === 'Table Row Heatmap') {
+    updateState('heatmapMode', 'row')
+  } else if (rendererName === 'Table Col Heatmap') {
+    updateState('heatmapMode', 'col')
+  }
 }
 const onUpdateAggregatorName = aggregatorName => {
   updateState('aggregatorName', aggregatorName)
diff --git a/src/components/pivottable/VPivottable.vue b/src/components/pivottable/VPivottable.vue
index 8893faf..f6e1357 100644
--- a/src/components/pivottable/VPivottable.vue
+++ b/src/components/pivottable/VPivottable.vue
@@ -2,7 +2,7 @@
   <component
     :is="rendererComponent"
     v-bind="props"
-  ></component>
+  />
 </template>
 
 <script setup>
@@ -19,7 +19,3 @@ const props = defineProps({
 const rendererComponent = computed(() => props.rendererItems[props.rendererName] || TableRenderer.Table)
 
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/components/pivottable/VPivottableBody.vue b/src/components/pivottable/VPivottableBody.vue
index 17aade4..e5d93bb 100644
--- a/src/components/pivottable/VPivottableBody.vue
+++ b/src/components/pivottable/VPivottableBody.vue
@@ -1,29 +1,57 @@
 <template>
-  <tbody>
+  <tbody v-if="pivotData">
     <VPivottableBodyRows
-      v-for="(rowKey, i) in rowKeys"
-      :key="`rowKeyRow${i}`"
-      :pivotData="pivotData"
-      :index="i"
       :rowKeys="rowKeys"
-      :rowKey="rowKey"
       :colKeys="colKeys"
+      :rowTotal="rowTotal"
+      :tableOptions="tableOptions"
+    />
+    <VPivottableBodyRowsTotalRow
+      :colTotal="colTotal"
+      :rowTotal="rowTotal"
       :rowAttrs="rowAttrs"
       :colAttrs="colAttrs"
+      :colKeys="colKeys"
+      :localeStrings="localeStrings"
       :tableOptions="tableOptions"
-      :rowTotal="rowTotal"
     />
   </tbody>
 </template>
 
 <script setup>
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
 import VPivottableBodyRows from './VPivottableBodyRows.vue'
-import { usePivotData } from '@/composables/usePivotData'
+import VPivottableBodyRowsTotalRow from './VPivottableBodyRowsTotalRow.vue'
 
-const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } = usePivotData()
-const { rowTotal, tableOptions } = defineProps(['rowTotal', 'tableOptions'])
-</script>
+defineProps({
+  rowTotal: {
+    type: Boolean,
+    default: true
+  },
+  colTotal: {
+    type: Boolean,
+    default: true
+  },
+  localeStrings: {
+    type: Object,
+    default: () => ({
+      totals: 'Totals'
+    })
+  },
+  tableOptions: {
+    type: Object,
+    default: () => ({
+      clickCallback: null
+    })
+  }
+})
 
-<style lang="scss" scoped>
+const {
+  pivotData,
+  rowKeys,
+  colKeys,
+  rowAttrs,
+  colAttrs
+} = useProvidePivotData()
 
-</style>
+</script>
diff --git a/src/components/pivottable/VPivottableBodyRows.vue b/src/components/pivottable/VPivottableBodyRows.vue
index 56966f7..2304174 100644
--- a/src/components/pivottable/VPivottableBodyRows.vue
+++ b/src/components/pivottable/VPivottableBodyRows.vue
@@ -1,49 +1,97 @@
 <template>
-  <tr>
-    <th v-for="(text, j) in rowKey" :key="`rowKeyLabel${index}-${j}`"
-      class="pvtRowLabel"
-      :rowspan="spanSize(rowKeys, index, j)"
-      :colspan="j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1"
+  <tr v-for="(rowKey, i) in rowKeys" :key="`rowKeyRow${i}`">
+    <template v-for="(text, j) in rowKey" :key="`rowLabel${i}-${j}`">
+      <th
+        v-if="spanSize(rowKeys, i, j) !== -1"
+        class="pvtRowLabel"
+        :rowSpan="spanSize(rowKeys, i, j)"
+        :colSpan="j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1"
+      >
+        {{ text }}
+      </th>
+    </template>
+    <td
+      v-for="(colKey, j) in colKeys"
+      :key="`pvtVal${i}-${j}`"
+      class="pvVal"
+      :style="getValueCellStyle(rowKey, colKey)"
+      @click="handleCellClick(getAggregator(rowKey, colKey).value(), rowKey, colKey)"
     >
-      {{ text }}
-    </th>
-    <td v-for="(colKey, j) in colKeys" :key="`pvtVal${index}-${j}`"
-      :class="['pvVal']"
-    >
-    {{ getValue(rowKey, colKey) }}
+      {{ getAggregator(rowKey, colKey).format(getAggregator(rowKey, colKey).value()) }}
     </td>
-    <td v-if="rowTotal"
+    <td
+      v-if="rowTotal"
       class="pvtTotal"
+      :style="getRowTotalStyle(rowKey)"
+      @click="handleCellClick(getAggregator(rowKey, []).value(), rowKey, [])"
     >
-      {{ getTotalValue(rowKey, []) }}
+      {{ getAggregator(rowKey, []).format(getAggregator(rowKey, []).value()) }}
     </td>
   </tr>
 </template>
 
 <script setup>
-import { spanSize } from '../../helper'
+
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
+
 const props = defineProps({
-  pivotData: Object,
-  index: Number,
-  rowKeys: Array,
-  rowKey: Array,
-  colKeys: Array,
-  rowAttrs: Array,
-  colAttrs: Array,
-  tableOptions: Object,
-  rowTotal: Boolean
+  rowKeys: {
+    type: Array,
+    required: true
+  },
+  colKeys: {
+    type: Array,
+    required: true
+  },
+  rowTotal: {
+    type: Boolean,
+    required: true
+  },
+  tableOptions: {
+    type: Object,
+    required: true
+  }
 })
-const getValue = (rowKey, colKey) => {
-  const aggregator = props.pivotData.getAggregator(rowKey, colKey)
-  return aggregator.format(aggregator.value())
+
+const {
+  pivotData,
+  spanSize,
+  valueCellColors,
+  colTotalColors,
+  rowAttrs,
+  colAttrs,
+  getAggregator
+} = useProvidePivotData()
+
+const getValueCellStyle = (rowKey, colKey) => {
+  const value = getAggregator(rowKey, colKey).value()
+  return valueCellColors(rowKey, colKey, value)
 }
-const getTotalValue = (rowKey, colKey) => {
-  const totalAggregator = props.pivotData.getAggregator(rowKey, colKey)
-  return totalAggregator.format(totalAggregator.value())
+
+const getRowTotalStyle = (rowKey) => {
+  const value = getAggregator(rowKey, []).value()
+  return colTotalColors(value)
 }
 
-</script>
+const handleCellClick = (value, rowValues, colValues) => {
+  if (props.tableOptions?.clickCallback) {
+    const filters = {}
+
+    // Add column filters
+    colAttrs.value.forEach((attr, i) => {
+      if (colValues[i] !== undefined && colValues[i] !== null) {
+        filters[attr] = colValues[i]
+      }
+    })
 
-<style lang="scss" scoped>
+    // Add row filters
+    rowAttrs.value.forEach((attr, i) => {
+      if (rowValues[i] !== undefined && rowValues[i] !== null) {
+        filters[attr] = rowValues[i]
+      }
+    })
 
-</style>
+    props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+  }
+}
+</script>
diff --git a/src/components/pivottable/VPivottableBodyRowsTotalRow.vue b/src/components/pivottable/VPivottableBodyRowsTotalRow.vue
index e69de29..62ea8ec 100644
--- a/src/components/pivottable/VPivottableBodyRowsTotalRow.vue
+++ b/src/components/pivottable/VPivottableBodyRowsTotalRow.vue
@@ -0,0 +1,90 @@
+<template>
+  <tr v-if="colTotal">
+    <th
+      class="pvtTotalLabel"
+      :colSpan="rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)"
+    >
+      {{ localeStrings.totals }}
+    </th>
+    <td
+      v-for="(colKey, i) in colKeys"
+      :key="`total${i}`"
+      class="pvtTotal"
+      :style="getColTotalStyle(colKey)"
+      @click="handleCellClick(getAggregator([], colKey).value(), [], colKey)"
+    >
+      {{ getAggregator([], colKey).format(getAggregator([], colKey).value()) }}
+    </td>
+    <td
+      v-if="rowTotal"
+      class="pvtGrandTotal"
+      @click="handleCellClick(grandTotalValue, [], [])"
+    >
+      {{ getAggregator([], []).format(grandTotalValue) }}
+    </td>
+  </tr>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
+
+const props = defineProps({
+  colTotal: {
+    type: Boolean,
+    required: true
+  },
+  rowTotal: {
+    type: Boolean,
+    required: true
+  },
+  localeStrings: {
+    type: Object,
+    required: true
+  },
+  tableOptions: {
+    type: Object,
+    required: true
+  }
+})
+
+const {
+  getAggregator,
+  rowTotalColors,
+  colAttrs,
+  rowAttrs,
+  colKeys,
+  pivotData
+} = useProvidePivotData()
+
+const grandTotalValue = computed(() => {
+  return getAggregator([], []).value()
+})
+
+const getColTotalStyle = (colKey) => {
+  const value = getAggregator([], colKey).value()
+  return rowTotalColors(value)
+}
+
+const handleCellClick = (value, rowValues, colValues) => {
+  if (props.tableOptions?.clickCallback) {
+    const filters = {}
+
+    // Add column filters
+    colAttrs.value.forEach((attr, i) => {
+      if (colValues[i] !== undefined && colValues[i] !== null) {
+        filters[attr] = colValues[i]
+      }
+    })
+
+    // Add row filters
+    rowAttrs.value.forEach((attr, i) => {
+      if (rowValues[i] !== undefined && rowValues[i] !== null) {
+        filters[attr] = rowValues[i]
+      }
+    })
+
+    props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+  }
+}
+</script>
diff --git a/src/components/pivottable/VPivottableHeader.vue b/src/components/pivottable/VPivottableHeader.vue
index ad662dd..5360757 100644
--- a/src/components/pivottable/VPivottableHeader.vue
+++ b/src/components/pivottable/VPivottableHeader.vue
@@ -1,27 +1,52 @@
 <template>
   <thead>
-    <VPivottableHeaderRows
-      v-for="(col, i) in colAttrs"
-      :key="`colAttrs${i}`"
-      :index="i"
-      :col="col"
-      :rowAttrs="rowAttrs"
-      :colAttrs="colAttrs"
-      :colKeys="colKeys"
-      :rowTotal="rowTotal"
-      :localeStrings="localeStrings"
-    />
+    <template v-if="pivotData">
+      <tr v-for="(c, j) in colAttrs" :key="`colAttrs${j}`">
+        <th v-if="j === 0 && rowAttrs.length !== 0" :colSpan="rowAttrs.length" :rowSpan="colAttrs.length"></th>
+        <th class="pvtAxisLabel">{{ c }}</th>
+        <VPivottableHeaderColumns
+          :colKeys="colKeys"
+          :colIndex="j"
+          :colAttrsLength="colAttrs.length"
+          :rowAttrsLength="rowAttrs.length"
+        />
+        <VPivottableHeaderRowsTotal
+          v-if="j === 0 && rowTotal"
+          :colAttrsLength="colAttrs.length"
+          :rowAttrsLength="rowAttrs.length"
+          :localeStrings="localeStrings"
+        />
+      </tr>
+      <VPivottableHeaderRows
+        v-if="rowAttrs.length !== 0"
+        :rowAttrs="rowAttrs"
+        :rowTotal="rowTotal"
+        :colAttrsLength="colAttrs.length"
+        :localeStrings="localeStrings"
+      />
+    </template>
   </thead>
 </template>
 
 <script setup>
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
+import VPivottableHeaderColumns from './VPivottableHeaderColumns.vue'
 import VPivottableHeaderRows from './VPivottableHeaderRows.vue'
-import { usePivotData } from '@/composables/usePivotData'
+import VPivottableHeaderRowsTotal from './VPivottableHeaderRowsTotal.vue'
 
-const { rowAttrs, colAttrs, colKeys } = usePivotData()
-const { localeStrings, rowTotal } = defineProps(['localeStrings', 'rowTotal'])
-</script>
+defineProps({
+  rowTotal: {
+    type: Boolean,
+    default: true
+  },
+  localeStrings: {
+    type: Object,
+    default: () => ({
+      totals: 'Totals'
+    })
+  }
+})
 
-<style lang="scss" scoped>
+const { pivotData, colAttrs, rowAttrs, colKeys } = useProvidePivotData()
 
-</style>
+</script>
diff --git a/src/components/pivottable/VPivottableHeaderColumns.vue b/src/components/pivottable/VPivottableHeaderColumns.vue
new file mode 100644
index 0000000..124aa1a
--- /dev/null
+++ b/src/components/pivottable/VPivottableHeaderColumns.vue
@@ -0,0 +1,37 @@
+<template>
+  <template v-for="(colKey, i) in colKeys" :key="`colKey${i}`">
+    <th
+      v-if="spanSize(colKeys, i, colIndex) !== -1"
+      class="pvtColLabel"
+      :colSpan="spanSize(colKeys, i, colIndex)"
+      :rowSpan="colIndex === colAttrsLength - 1 && rowAttrsLength !== 0 ? 2 : 1"
+    >
+      {{ colKey[colIndex] }}
+    </th>
+  </template>
+</template>
+
+<script setup>
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
+
+defineProps({
+  colKeys: {
+    type: Array,
+    required: true
+  },
+  colIndex: {
+    type: Number,
+    required: true
+  },
+  colAttrsLength: {
+    type: Number,
+    required: true
+  },
+  rowAttrsLength: {
+    type: Number,
+    required: true
+  }
+})
+
+const { spanSize } = useProvidePivotData()
+</script>
diff --git a/src/components/pivottable/VPivottableHeaderRows.vue b/src/components/pivottable/VPivottableHeaderRows.vue
index caae377..3a75650 100644
--- a/src/components/pivottable/VPivottableHeaderRows.vue
+++ b/src/components/pivottable/VPivottableHeaderRows.vue
@@ -1,47 +1,38 @@
 <template>
   <tr>
-    <th v-if="index === 0 && rowAttrs.length !== 0"
-      :colspan="rowAttrs.length"
-      :rowspan="colAttrs.length"
-    >
-    </th>
     <th
+      v-for="(r, i) in rowAttrs"
+      :key="`rowAttr${i}`"
       class="pvtAxisLabel"
     >
-      {{ col }}
+      {{ r }}
     </th>
-    <th v-for="(colKey, j) in colKeys"
-      :key="`colKey${j}`"
-      class="pvtColLabel"
-      :colspan="spanSize(colKeys, j, index)"
-      :rowspan="index === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1"
-    >
-      {{ colKey[index] }}
-    </th>
-    <th v-if="index === 0 && rowTotal"
+    <th
       class="pvtTotalLabel"
-      :rowspan="colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)"
+      v-if="rowTotal || colAttrsLength !== 0"
     >
-      {{ localeStrings.totals }}
+      {{ colAttrsLength === 0 && rowTotal ? localeStrings.totals : null }}
     </th>
   </tr>
 </template>
 
 <script setup>
-import { spanSize } from '../../helper'
-
-const { index, rowAttrs, colAttrs, colKeys, rowTotal, localeStrings, col } = defineProps({
-  index: { type: Number, required: true },
-  rowAttrs: { type: Array, required: true },
-  colAttrs: { type: Array, required: true },
-  colKeys: { type: Array, required: true },
-  rowTotal: { type: Boolean, required: true },
-  localeStrings: { type: Object, required: true },
-  col: { type: String, required: true }
+defineProps({
+  rowAttrs: {
+    type: Array,
+    required: true
+  },
+  rowTotal: {
+    type: Boolean,
+    required: true
+  },
+  colAttrsLength: {
+    type: Number,
+    required: true
+  },
+  localeStrings: {
+    type: Object,
+    required: true
+  }
 })
-
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/components/pivottable/VPivottableHeaderRowsTotal.vue b/src/components/pivottable/VPivottableHeaderRowsTotal.vue
index e69de29..cf11427 100644
--- a/src/components/pivottable/VPivottableHeaderRowsTotal.vue
+++ b/src/components/pivottable/VPivottableHeaderRowsTotal.vue
@@ -0,0 +1,25 @@
+<template>
+  <th
+    class="pvtTotalLabel"
+    :rowSpan="colAttrsLength + (rowAttrsLength === 0 ? 0 : 1)"
+  >
+    {{ localeStrings.totals }}
+  </th>
+</template>
+
+<script setup>
+defineProps({
+  colAttrsLength: {
+    type: Number,
+    required: true
+  },
+  rowAttrsLength: {
+    type: Number,
+    required: true
+  },
+  localeStrings: {
+    type: Object,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/pivottable/renderer/TableRenderer.vue b/src/components/pivottable/renderer/TableRenderer.vue
index 7e2c38d..26a6629 100644
--- a/src/components/pivottable/renderer/TableRenderer.vue
+++ b/src/components/pivottable/renderer/TableRenderer.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { defaultProps } from '@/helper'
-import { providePivotData } from '@/composables/usePivotData'
+import { providePivotData } from '@/composables/useProvidePivotData'
 import VPivottableHeader from '../VPivottableHeader.vue'
 import VPivottableBody from '../VPivottableBody.vue'
 
diff --git a/src/composables/index.js b/src/composables/index.js
index 5f18d43..608b3d0 100644
--- a/src/composables/index.js
+++ b/src/composables/index.js
@@ -1,3 +1,3 @@
-export { usePivotData, providePivotData } from './pivotData'
+export { useProvidePivotData, providePivotData } from './useProvidePivotData'
 export { usePropsState } from './usePropsState'
 export { useMaterializeInput } from './useMaterializeInput'
diff --git a/src/composables/pivotData.js b/src/composables/pivotData.js
deleted file mode 100644
index c6ef40f..0000000
--- a/src/composables/pivotData.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { inject, provide } from 'vue'
-import { PivotData } from '../helper'
-
-const pivotDataKey = Symbol('pivotData')
-
-export function providePivotData (props) {
-  const pivotData = new PivotData(props)
-  const colAttrs = pivotData.props.cols
-  const rowAttrs = pivotData.props.rows
-  const rowKeys = pivotData.getRowKeys()
-  const colKeys = pivotData.getColKeys()
-  const grandTotalAggregator = pivotData.getAggregator([], [])
-  const getAggregator = pivotData.getAggregator
-  provide(pivotDataKey, {
-    colAttrs,
-    rowAttrs,
-    rowKeys,
-    colKeys,
-    grandTotalAggregator,
-    getAggregator,
-    pivotData
-  })
-}
-
-export function usePivotData () {
-  return inject(pivotDataKey)
-}
diff --git a/src/composables/usePivotData.js b/src/composables/usePivotData.js
deleted file mode 100644
index b8f8655..0000000
--- a/src/composables/usePivotData.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { inject, provide, ref, computed } from 'vue'
-import { PivotData } from '@/helper/utilities.js'
-
-const pivotDataKey = Symbol('pivotData')
-
-export function providePivotData (props) {
-  const error = ref(null)
-
-  const pivotData = computed(() => {
-    try {
-      return new PivotData(props)
-    } catch (err) {
-      console.error(err.stack)
-      error.value = 'An error occurred computing the PivotTable results.'
-      return null
-    }
-  })
-
-  const rowKeys = computed(() => pivotData.value?.getRowKeys() || [])
-  const colKeys = computed(() => pivotData.value?.getColKeys() || [])
-  const colAttrs = computed(() => pivotData.value?.props.cols || [])
-  const rowAttrs = computed(() => pivotData.value?.props.rows || [])
-
-  const getAggregator = (rowKey, colKey) => pivotData.value?.getAggregator(rowKey, colKey)
-  const grandTotalAggregator = () => pivotData.value.getAggregator([], [])
-
-  provide(pivotDataKey, {
-    pivotData,
-    rowKeys,
-    colKeys,
-    colAttrs,
-    rowAttrs,
-    getAggregator,
-    grandTotalAggregator,
-    error
-  })
-}
-
-export function usePivotData () {
-  return inject(pivotDataKey)
-}
diff --git a/src/composables/useProvidePivotData.js b/src/composables/useProvidePivotData.js
new file mode 100644
index 0000000..b4085f1
--- /dev/null
+++ b/src/composables/useProvidePivotData.js
@@ -0,0 +1,139 @@
+import { ref, provide, inject, computed } from 'vue'
+import { PivotData } from '@/helper'
+
+const PIVOT_DATA_KEY = Symbol('pivotData')
+
+export function providePivotData (props) {
+  const error = ref(null)
+
+  const pivotData = computed(() => {
+    try {
+      return new PivotData(props)
+    } catch (err) {
+      console.error(err.stack)
+      error.value = 'An error occurred computing the PivotTable results.'
+      return null
+    }
+  })
+
+  const rowKeys = computed(() => pivotData.value?.getRowKeys() || [])
+  const colKeys = computed(() => pivotData.value?.getColKeys() || [])
+  const colAttrs = computed(() => pivotData.value?.props.cols || [])
+  const rowAttrs = computed(() => pivotData.value?.props.rows || [])
+  const colorScaleGenerator = props.tableColorScaleGenerator
+  const getAggregator = (rowKey, colKey) => pivotData.value?.getAggregator(rowKey, colKey) || {
+    value: () => null,
+    format: () => ''
+  }
+
+  const grandTotalAggregator = computed(() => {
+    return pivotData.value
+      ? getAggregator([], [])
+      : {
+          value: () => null,
+          format: () => ''
+        }
+  })
+
+  const allValues = computed(() => {
+    const values = []
+    rowKeys.value.forEach(r =>
+      colKeys.value.forEach(c =>
+        values.push(getAggregator(r, c).value())
+      )
+    )
+    return values
+  })
+
+  // Colors for heatmap
+  const valueCellColors = (rowKey, colKey, value) => {
+    if (props.heatmapMode === 'full') {
+      const colorScale = colorScaleGenerator(allValues.value)
+      return colorScale(value)
+    } else if (props.heatmapMode === 'row') {
+      const rowColorScales = rowKeys.value.reduce((scales, r) => {
+        scales[r] = colorScaleGenerator(colKeys.value.map(x =>
+          getAggregator(r, x).value()
+        ))
+        return scales
+      }, {})
+      return rowColorScales[rowKey](value)
+    } else if (props.heatmapMode === 'col') {
+      const colColorScales = colKeys.value.reduce((scales, c) => {
+        scales[c] = colorScaleGenerator(rowKeys.value.map(x =>
+          getAggregator(x, c).value()
+        ))
+        return scales
+      }, {})
+      return colColorScales[colKey](value)
+    }
+    return {}
+  }
+  const rowTotalColors = (value) => {
+    if (!props.heatmapMode) return {}
+    const rowTotalValues = colKeys.value.map(x =>
+      getAggregator([], x).value()
+    )
+    return colorScaleGenerator(rowTotalValues)(value)
+  }
+
+  const colTotalColors = (value) => {
+    if (!props.heatmapMode) return {}
+    const colTotalValues = rowKeys.value.map(x =>
+      getAggregator(x, []).value()
+    )
+    return colorScaleGenerator(colTotalValues)(value)
+  }
+
+  const spanSize = (arr, i, j) => {
+    let x
+    if (i !== 0) {
+      let noDraw = true
+      for (x = 0; x <= j; x++) {
+        if (arr[i - 1][x] !== arr[i][x]) {
+          noDraw = false
+        }
+      }
+      if (noDraw) {
+        return -1
+      }
+    }
+
+    let len = 0
+    while (i + len < arr.length) {
+      let stop = false
+      for (x = 0; x <= j; x++) {
+        if (arr[i][x] !== arr[i + len][x]) {
+          stop = true
+        }
+      }
+      if (stop) {
+        break
+      }
+      len++
+    }
+    return len
+  }
+
+  const pivotDataContext = {
+    pivotData,
+    rowKeys,
+    colKeys,
+    colAttrs,
+    rowAttrs,
+    getAggregator,
+    grandTotalAggregator,
+    spanSize,
+    valueCellColors,
+    rowTotalColors,
+    colTotalColors,
+    error
+  }
+
+  provide(PIVOT_DATA_KEY, pivotDataContext)
+  return pivotDataContext
+}
+
+export function useProvidePivotData () {
+  return inject(PIVOT_DATA_KEY)
+}
diff --git a/src/helper/defaultProps.js b/src/helper/defaultProps.js
index 9f3f855..e5786c7 100644
--- a/src/helper/defaultProps.js
+++ b/src/helper/defaultProps.js
@@ -1,4 +1,5 @@
 import { aggregators, locales } from './utilities'
+import { redColorScaleGenerator } from './redColorScaleGenerator'
 export default {
   data: {
     type: [Array, Object, Function],
@@ -14,7 +15,8 @@ export default {
   },
   heatmapMode: String,
   tableColorScaleGenerator: {
-    type: Function
+    type: Function,
+    default: redColorScaleGenerator
   },
   tableOptions: {
     type: Object,
diff --git a/src/helper/index.js b/src/helper/index.js
index 82f985d..295a076 100644
--- a/src/helper/index.js
+++ b/src/helper/index.js
@@ -1,3 +1,3 @@
 export { default as defaultProps } from './defaultProps.js'
-export { spanSize } from './spanSize.js'
+export { redColorScaleGenerator } from './redColorScaleGenerator.js'
 export * from './utilities.js'
diff --git a/src/helper/redColorScaleGenerator.js b/src/helper/redColorScaleGenerator.js
new file mode 100644
index 0000000..4f62db2
--- /dev/null
+++ b/src/helper/redColorScaleGenerator.js
@@ -0,0 +1,8 @@
+export function redColorScaleGenerator (values) {
+  const min = Math.min.apply(Math, values)
+  const max = Math.max.apply(Math, values)
+  return x => {
+    const nonRed = 255 - Math.round(255 * (x - min) / (max - min))
+    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` }
+  }
+}
diff --git a/src/helper/spanSize.js b/src/helper/spanSize.js
deleted file mode 100644
index 241db60..0000000
--- a/src/helper/spanSize.js
+++ /dev/null
@@ -1,39 +0,0 @@
-export const spanSize = (arr, i, j) => {
-  // helper function for setting row/col-span in pivotTableRenderer
-  let x
-  if (i !== 0) {
-    let asc, end
-    let noDraw = true
-    for (
-      x = 0, end = j, asc = end >= 0;
-      asc ? x <= end : x >= end;
-      asc ? x++ : x--
-    ) {
-      if (arr[i - 1][x] !== arr[i][x]) {
-        noDraw = false
-      }
-    }
-    if (noDraw) {
-      return -1
-    }
-  }
-  let len = 0
-  while (i + len < arr.length) {
-    let asc1, end1
-    let stop = false
-    for (
-      x = 0, end1 = j, asc1 = end1 >= 0;
-      asc1 ? x <= end1 : x >= end1;
-      asc1 ? x++ : x--
-    ) {
-      if (arr[i][x] !== arr[i + len][x]) {
-        stop = true
-      }
-    }
-    if (stop) {
-      break
-    }
-    len++
-  }
-  return len
-}