diff --git a/src/components/Derivatives/Derivatives.columns.js b/src/components/Derivatives/Derivatives.columns.js
index 040d65e2d..f46a2c0fd 100644
--- a/src/components/Derivatives/Derivatives.columns.js
+++ b/src/components/Derivatives/Derivatives.columns.js
@@ -1,8 +1,5 @@
-import React from 'react'
-import { Cell } from '@blueprintjs/table'
-
 import { formatAmount, fixedFloat } from 'ui/utils'
-import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns'
+import { getCell, getCellState, getColumnWidth } from 'utils/columns'
 
 export const getColumns = ({
   t,
@@ -19,15 +16,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('pair', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { pair } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(pair, t)}>
-          {pair}
-        </Cell>
-      )
+      return getCell(pair, t)
     },
     copyText: rowIndex => filteredData[rowIndex].pair,
   },
@@ -36,19 +27,9 @@ export const getColumns = ({
     name: 'column.priceDeriv',
     width: getColumnWidth('price', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { price } = filteredData[rowIndex]
-      const fixedPrice = fixedFloat(price)
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(fixedPrice, t)}
-        >
-          {fixedPrice}
-        </Cell>
-      )
+      return getCell(fixedFloat(price), t)
     },
     isNumericValue: true,
     copyText: rowIndex => fixedFloat(filteredData[rowIndex].price),
@@ -58,19 +39,9 @@ export const getColumns = ({
     name: 'column.priceSpot',
     width: getColumnWidth('priceSpot', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { priceSpot } = filteredData[rowIndex]
-      const fixedPrice = fixedFloat(priceSpot)
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(fixedPrice, t)}
-        >
-          {fixedPrice}
-        </Cell>
-      )
+      return getCell(fixedFloat(priceSpot), t)
     },
     isNumericValue: true,
     copyText: rowIndex => fixedFloat(filteredData[rowIndex].priceSpot),
@@ -80,19 +51,9 @@ export const getColumns = ({
     name: 'column.fundBalance',
     width: getColumnWidth('fundBal', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { fundBal } = filteredData[rowIndex]
-      const fixedBalance = fixedFloat(fundBal)
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(fixedBalance, t)}
-        >
-          {fixedBalance}
-        </Cell>
-      )
+      return getCell(fixedFloat(fundBal), t)
     },
     isNumericValue: true,
     copyText: rowIndex => fixedFloat(filteredData[rowIndex].fundBal),
@@ -102,19 +63,9 @@ export const getColumns = ({
     name: 'column.fundingAccrued',
     width: getColumnWidth('fundingAccrued', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { fundingAccrued } = filteredData[rowIndex]
-      const fixedFunding = fixedFloat(fundingAccrued)
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(fixedFunding, t)}
-        >
-          {formatAmount(fundingAccrued)}
-        </Cell>
-      )
+      return getCell(formatAmount(fundingAccrued), t, fixedFloat(fundingAccrued))
     },
     isNumericValue: true,
     copyText: rowIndex => fixedFloat(filteredData[rowIndex].fundingAccrued),
@@ -124,18 +75,9 @@ export const getColumns = ({
     name: 'column.fundingStep',
     width: getColumnWidth('fundingStep', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { fundingStep } = filteredData[rowIndex]
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(fundingStep, t)}
-        >
-          {fundingStep}
-        </Cell>
-      )
+      return getCell(fundingStep, t)
     },
     copyText: rowIndex => filteredData[rowIndex].fundingStep,
   },
@@ -145,15 +87,9 @@ export const getColumns = ({
     nameStr: `${t('column.updated')} (${timeOffset})`,
     width: getColumnWidth('timestamp', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const timestamp = getFullTime(filteredData[rowIndex].timestamp)
-      return (
-        <Cell tooltip={getTooltipContent(timestamp, t)}>
-          {timestamp}
-        </Cell>
-      )
+      return getCell(timestamp, t)
     },
     copyText: rowIndex => getFullTime(filteredData[rowIndex].timestamp),
   },
@@ -162,18 +98,9 @@ export const getColumns = ({
     name: 'column.clampMin',
     width: getColumnWidth('clampMin', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { clampMin } = filteredData[rowIndex]
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(clampMin, t)}
-        >
-          {clampMin}
-        </Cell>
-      )
+      return getCell(clampMin, t)
     },
     copyText: rowIndex => filteredData[rowIndex].clampMin,
   },
@@ -182,18 +109,9 @@ export const getColumns = ({
     name: 'column.clampMax',
     width: getColumnWidth('clampMax', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { clampMax } = filteredData[rowIndex]
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(clampMax, t)}
-        >
-          {clampMax}
-        </Cell>
-      )
+      return getCell(clampMax, t)
     },
     copyText: rowIndex => filteredData[rowIndex].clampMax,
   },
diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js
index 31ed6276a..1c0d0c1a8 100644
--- a/src/components/Invoices/Invoices.columns.js
+++ b/src/components/Invoices/Invoices.columns.js
@@ -1,9 +1,11 @@
-import React from 'react'
-import { Cell } from '@blueprintjs/table'
-
-import JSONFormat from 'ui/JSONFormat'
+import {
+  getCell,
+  getLinkCell,
+  getCellState,
+  getColumnWidth,
+  getJsonFormattedCell,
+} from 'utils/columns'
 import { fixedFloat, formatAmount } from 'ui/utils'
-import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns'
 
 export const getColumns = ({
   t,
@@ -20,15 +22,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('id', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { id } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(id, t)}>
-          {id}
-        </Cell>
-      )
+      return getCell(id, t)
     },
     copyText: rowIndex => filteredData[rowIndex].id,
   },
@@ -37,19 +33,9 @@ export const getColumns = ({
     name: 'column.amount',
     width: getColumnWidth('amount', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { amount, currency } = filteredData[rowIndex]
-      const tooltip = `${fixedFloat(amount)} ${currency}`
-      return (
-        <Cell
-          className='bitfinex-text-align-right'
-          tooltip={getTooltipContent(tooltip, t)}
-        >
-          {formatAmount(amount)}
-        </Cell>
-      )
+      return getCell(formatAmount(amount), t, `${fixedFloat(amount)} ${currency}`)
     },
     isNumericValue: true,
     copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
@@ -60,15 +46,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('currency', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { currency } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(currency, t)}>
-          {currency}
-        </Cell>
-      )
+      return getCell(currency, t)
     },
     copyText: rowIndex => filteredData[rowIndex].currency,
   },
@@ -78,15 +58,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('orderId', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { orderId } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(orderId, t)}>
-          {orderId}
-        </Cell>
-      )
+      return getCell(orderId, t)
     },
     copyText: rowIndex => filteredData[rowIndex].orderId,
   },
@@ -95,18 +69,9 @@ export const getColumns = ({
     name: 'column.payCurrencies',
     width: getColumnWidth('payCurrencies', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { payCurrencies } = filteredData[rowIndex]
-      const formattedPayCurrenciesInfo = JSON.stringify(payCurrencies, undefined, 2)
-      return (
-        <Cell>
-          <JSONFormat content={formattedPayCurrenciesInfo}>
-            {formattedPayCurrenciesInfo}
-          </JSONFormat>
-        </Cell>
-      )
+      return getJsonFormattedCell(payCurrencies)
     },
     copyText: rowIndex => JSON.stringify(filteredData[rowIndex].payCurrencies, undefined, 2),
   },
@@ -116,15 +81,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('status', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { status } = filteredData[rowIndex]
-      return (
-        <Cell tooltip={getTooltipContent(status, t)}>
-          {status}
-        </Cell>
-      )
+      return getCell(status, t)
     },
     copyText: rowIndex => filteredData[rowIndex].status,
   },
@@ -134,18 +93,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('customerInfo', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { customerInfo } = filteredData[rowIndex]
-      const formattedCustomerInfo = JSON.stringify(customerInfo, undefined, 2)
-      return (
-        <Cell>
-          <JSONFormat content={formattedCustomerInfo}>
-            {formattedCustomerInfo}
-          </JSONFormat>
-        </Cell>
-      )
+      return getJsonFormattedCell(customerInfo)
     },
     copyText: rowIndex => JSON.stringify(filteredData[rowIndex].customerInfo, undefined, 2),
   },
@@ -155,18 +105,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('invoices', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { invoices } = filteredData[rowIndex]
-      const formattedInvoicesInfo = JSON.stringify(invoices, undefined, 2)
-      return (
-        <Cell>
-          <JSONFormat content={formattedInvoicesInfo}>
-            {formattedInvoicesInfo}
-          </JSONFormat>
-        </Cell>
-      )
+      return getJsonFormattedCell(invoices)
     },
     copyText: rowIndex => JSON.stringify(filteredData[rowIndex].invoices, undefined, 2),
   },
@@ -176,18 +117,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('payment', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { payment } = filteredData[rowIndex]
-      const formattedPayment = JSON.stringify(payment, undefined, 2)
-      return (
-        <Cell>
-          <JSONFormat content={formattedPayment}>
-            {formattedPayment}
-          </JSONFormat>
-        </Cell>
-      )
+      return getJsonFormattedCell(payment)
     },
     copyText: rowIndex => JSON.stringify(filteredData[rowIndex].payment, undefined, 2),
   },
@@ -197,15 +129,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('duration', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { duration } = filteredData[rowIndex]
-      return (
-        <Cell>
-          {duration}
-        </Cell>
-      )
+      return getCell(duration, t)
     },
     copyText: rowIndex => filteredData[rowIndex].duration,
   },
@@ -215,15 +141,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('merchantName', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { merchantName } = filteredData[rowIndex]
-      return (
-        <Cell>
-          {merchantName}
-        </Cell>
-      )
+      return getCell(merchantName, t)
     },
     copyText: rowIndex => filteredData[rowIndex].merchantName,
   },
@@ -233,23 +153,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('redirectUrl', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { redirectUrl } = filteredData[rowIndex]
-      return (
-        <Cell>
-          <>
-            <a
-              target='_blank'
-              href={`${redirectUrl}`}
-              rel='noopener noreferrer'
-            >
-              {redirectUrl}
-            </a>
-          </>
-        </Cell>
-      )
+      return getLinkCell(redirectUrl)
     },
     copyText: rowIndex => filteredData[rowIndex].redirectUrl,
   },
@@ -259,15 +165,9 @@ export const getColumns = ({
     nameStr: `${t('column.date')} (${timeOffset})`,
     width: getColumnWidth('mts', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const timestamp = getFullTime(filteredData[rowIndex].mts)
-      return (
-        <Cell tooltip={getTooltipContent(timestamp, t)}>
-          {timestamp}
-        </Cell>
-      )
+      return getCell(timestamp, t)
     },
     copyText: rowIndex => getFullTime(filteredData[rowIndex].mts),
   },
@@ -277,23 +177,9 @@ export const getColumns = ({
     className: 'align-left',
     width: getColumnWidth('webhook', columnsWidth),
     renderer: (rowIndex) => {
-      if (isLoading || isNoData) {
-        return getCellState(isLoading, isNoData)
-      }
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
       const { webhook } = filteredData[rowIndex]
-      return (
-        <Cell>
-          <>
-            <a
-              target='_blank'
-              href={`${webhook}`}
-              rel='noopener noreferrer'
-            >
-              {webhook}
-            </a>
-          </>
-        </Cell>
-      )
+      return getLinkCell(webhook)
     },
     copyText: rowIndex => filteredData[rowIndex].webhook,
   },
diff --git a/src/components/PublicFunding/PublicFunding.columns.js b/src/components/PublicFunding/PublicFunding.columns.js
index 5172d8cf3..ef1ca4a15 100644
--- a/src/components/PublicFunding/PublicFunding.columns.js
+++ b/src/components/PublicFunding/PublicFunding.columns.js
@@ -1,141 +1,88 @@
-import React from 'react'
-import { Cell } from '@blueprintjs/table'
-
 import { fixedFloat, formatAmount } from 'ui/utils'
-import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns'
-
-export default function getColumns(props) {
-  const {
-    t,
-    isNoData,
-    isLoading,
-    timeOffset,
-    getFullTime,
-    filteredData,
-    targetSymbol,
-    columnsWidth,
-  } = props
+import { getCell, getCellState, getColumnWidth } from 'utils/columns'
 
-  return [
-    {
-      id: 'id',
-      name: 'column.id',
-      className: 'align-left',
-      width: getColumnWidth('id', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { id } = filteredData[rowIndex]
-        return (
-          <Cell tooltip={getTooltipContent(id, t)}>
-            {id}
-          </Cell>
-        )
-      },
-      copyText: rowIndex => filteredData[rowIndex].id,
+export const getColumns = ({
+  t,
+  isNoData,
+  isLoading,
+  timeOffset,
+  getFullTime,
+  filteredData,
+  targetSymbol,
+  columnsWidth,
+}) => [
+  {
+    id: 'id',
+    name: 'column.id',
+    className: 'align-left',
+    width: getColumnWidth('id', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { id } = filteredData[rowIndex]
+      return getCell(id, t)
+    },
+    copyText: rowIndex => filteredData[rowIndex].id,
+  },
+  {
+    id: 'mts',
+    className: 'align-left',
+    nameStr: `${t('column.time')} (${timeOffset})`,
+    width: getColumnWidth('mts', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const timestamp = getFullTime(filteredData[rowIndex].mts)
+      return getCell(timestamp, t)
     },
-    {
-      id: 'mts',
-      className: 'align-left',
-      nameStr: `${t('column.time')} (${timeOffset})`,
-      width: getColumnWidth('mts', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const timestamp = getFullTime(filteredData[rowIndex].mts)
-        return (
-          <Cell tooltip={getTooltipContent(timestamp, t)}>
-            {timestamp}
-          </Cell>
-        )
-      },
-      copyText: rowIndex => getFullTime(filteredData[rowIndex].mts),
+    copyText: rowIndex => getFullTime(filteredData[rowIndex].mts),
+  },
+  {
+    id: 'amount',
+    name: 'column.amount',
+    width: getColumnWidth('amount', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { amount } = filteredData[rowIndex]
+      return getCell(formatAmount(amount), t, fixedFloat(amount))
     },
-    {
-      id: 'amount',
-      name: 'column.amount',
-      width: getColumnWidth('amount', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { amount } = filteredData[rowIndex]
-        const fixedAmount = fixedFloat(amount)
-        return (
-          <Cell
-            className='bitfinex-text-align-right'
-            tooltip={getTooltipContent(fixedAmount, t)}
-          >
-            {formatAmount(amount)}
-          </Cell>
-        )
-      },
-      isNumericValue: true,
-      copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
+    isNumericValue: true,
+    copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
+  },
+  {
+    id: 'rate',
+    name: 'column.rateperc',
+    width: getColumnWidth('rate', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { rate } = filteredData[rowIndex]
+      return getCell(formatAmount(rate, { color: 'red' }), t, fixedFloat(rate))
     },
-    {
-      id: 'rate',
-      name: 'column.rateperc',
-      width: getColumnWidth('rate', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { rate } = filteredData[rowIndex]
-        return (
-          <Cell
-            className='bitfinex-text-align-right'
-            tooltip={getTooltipContent(fixedFloat(rate), t)}
-          >
-            {formatAmount(rate, { color: 'red' })}
-          </Cell>
-        )
-      },
-      isNumericValue: true,
-      copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate),
+    isNumericValue: true,
+    copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate),
+  },
+  {
+    id: 'period',
+    name: 'column.period',
+    className: 'align-left',
+    width: getColumnWidth('period', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const period = `${filteredData[rowIndex].period} ${t('column.days')}`
+      return getCell(period, t)
     },
-    {
-      id: 'period',
-      name: 'column.period',
-      className: 'align-left',
-      width: getColumnWidth('period', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const period = `${filteredData[rowIndex].period} ${t('column.days')}`
-        return (
-          <Cell
-            className='bitfinex-text-align-right'
-            tooltip={getTooltipContent(period, t)}
-          >
-            {period}
-          </Cell>
-        )
-      },
-      copyText: (rowIndex) => {
-        const days = t('column.days')
-        return `${filteredData[rowIndex].period} ${days}`
-      },
+    copyText: (rowIndex) => {
+      const days = t('column.days')
+      return `${filteredData[rowIndex].period} ${days}`
     },
-    {
-      id: 'currency',
-      name: 'column.currency',
-      className: 'align-left',
-      width: getColumnWidth('currency', columnsWidth),
-      renderer: () => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        return (
-          <Cell tooltip={getTooltipContent(targetSymbol, t)}>
-            {targetSymbol}
-          </Cell>
-        )
-      },
-      copyText: () => targetSymbol,
+  },
+  {
+    id: 'currency',
+    name: 'column.currency',
+    className: 'align-left',
+    width: getColumnWidth('currency', columnsWidth),
+    renderer: () => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      return getCell(targetSymbol, t)
     },
-  ]
-}
+    copyText: () => targetSymbol,
+  },
+]
diff --git a/src/components/PublicFunding/PublicFunding.js b/src/components/PublicFunding/PublicFunding.js
index 054b5e623..e3af7fa1e 100644
--- a/src/components/PublicFunding/PublicFunding.js
+++ b/src/components/PublicFunding/PublicFunding.js
@@ -21,7 +21,7 @@ import queryConstants from 'state/query/constants'
 import { getPath } from 'state/query/utils'
 import { checkInit, checkFetch } from 'state/utils'
 
-import getColumns from './PublicFunding.columns'
+import { getColumns } from './PublicFunding.columns'
 import { propTypes, defaultProps } from './PublicFunding.props'
 
 const TYPE = queryConstants.MENU_PUBLIC_FUNDING
diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js
index ceb9f0aa2..7bd6d0016 100644
--- a/src/components/PublicTrades/PublicTrades.columns.js
+++ b/src/components/PublicTrades/PublicTrades.columns.js
@@ -1,145 +1,86 @@
-import React from 'react'
-import { Cell } from '@blueprintjs/table'
-
 import { formatPair } from 'state/symbols/utils'
-import { formatAmount, fixedFloat, amountStyle } from 'ui/utils'
-import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns'
-
-export default function getColumns(props) {
-  const {
-    t,
-    isNoData,
-    isLoading,
-    targetPair,
-    timeOffset,
-    getFullTime,
-    filteredData,
-    columnsWidth,
-  } = props
+import { formatAmount, fixedFloat, formatType } from 'ui/utils'
+import { getCell, getCellState, getColumnWidth } from 'utils/columns'
 
-  return [
-    {
-      id: 'id',
-      name: 'column.id',
-      className: 'align-left',
-      width: getColumnWidth('id', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { id } = filteredData[rowIndex]
-        return (
-          <Cell tooltip={getTooltipContent(id, t)}>
-            {id}
-          </Cell>
-        )
-      },
-      copyText: rowIndex => filteredData[rowIndex].id,
+export const getColumns = ({
+  t,
+  isNoData,
+  isLoading,
+  targetPair,
+  timeOffset,
+  getFullTime,
+  filteredData,
+  columnsWidth,
+}) => [
+  {
+    id: 'id',
+    name: 'column.id',
+    className: 'align-left',
+    width: getColumnWidth('id', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { id } = filteredData[rowIndex]
+      return getCell(id, t)
     },
-    {
-      id: 'mts',
-      className: 'align-left',
-      nameStr: `${t('column.time')} (${timeOffset})`,
-      width: getColumnWidth('mts', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const timestamp = getFullTime(filteredData[rowIndex].mts)
-        return (
-          <Cell tooltip={getTooltipContent(timestamp, t)}>
-            {timestamp}
-          </Cell>
-        )
-      },
-      copyText: rowIndex => getFullTime(filteredData[rowIndex].mts),
+    copyText: rowIndex => filteredData[rowIndex].id,
+  },
+  {
+    id: 'mts',
+    className: 'align-left',
+    nameStr: `${t('column.time')} (${timeOffset})`,
+    width: getColumnWidth('mts', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const timestamp = getFullTime(filteredData[rowIndex].mts)
+      return getCell(timestamp, t)
     },
-    {
-      id: 'type',
-      name: 'column.type',
-      className: 'align-left',
-      width: getColumnWidth('type', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { type, amount } = filteredData[rowIndex]
-        const classes = amountStyle(amount)
-        return (
-          <Cell tooltip={getTooltipContent(type, t)}>
-            <>
-              <span className={classes}>
-                {type}
-              </span>
-            </>
-          </Cell>
-        )
-      },
-      copyText: rowIndex => filteredData[rowIndex].type,
+    copyText: rowIndex => getFullTime(filteredData[rowIndex].mts),
+  },
+  {
+    id: 'type',
+    name: 'column.type',
+    className: 'align-left',
+    width: getColumnWidth('type', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { type, amount } = filteredData[rowIndex]
+      return getCell(formatType(type, amount), t, type)
     },
-    {
-      id: 'price',
-      name: 'column.price',
-      width: getColumnWidth('price', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { price, amount } = filteredData[rowIndex]
-        const color = (amount > 0)
-          ? 'green'
-          : 'red'
-        return (
-          <Cell
-            className='bitfinex-text-align-right'
-            tooltip={getTooltipContent(fixedFloat(price), t)}
-          >
-            {formatAmount(price, { color })}
-          </Cell>
-        )
-      },
-      isNumericValue: true,
-      copyText: rowIndex => fixedFloat(filteredData[rowIndex].price),
+    copyText: rowIndex => filteredData[rowIndex].type,
+  },
+  {
+    id: 'price',
+    name: 'column.price',
+    width: getColumnWidth('price', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { price } = filteredData[rowIndex]
+      return getCell(formatAmount(price), t, fixedFloat(price))
     },
-    {
-      id: 'amount',
-      name: 'column.amount',
-      width: getColumnWidth('amount', columnsWidth),
-      renderer: (rowIndex) => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const { amount } = filteredData[rowIndex]
-        const fixedAmount = fixedFloat(amount)
-        return (
-          <Cell
-            className='bitfinex-text-align-right'
-            tooltip={getTooltipContent(fixedAmount, t)}
-          >
-            {formatAmount(amount)}
-          </Cell>
-        )
-      },
-      isNumericValue: true,
-      copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
+    isNumericValue: true,
+    copyText: rowIndex => fixedFloat(filteredData[rowIndex].price),
+  },
+  {
+    id: 'amount',
+    name: 'column.amount',
+    width: getColumnWidth('amount', columnsWidth),
+    renderer: (rowIndex) => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      const { amount } = filteredData[rowIndex]
+      return getCell(formatAmount(amount), t, fixedFloat(amount))
     },
-    {
-      id: 'pair',
-      name: 'column.pair',
-      className: 'align-left',
-      width: getColumnWidth('pair', columnsWidth),
-      renderer: () => {
-        if (isLoading || isNoData) {
-          return getCellState(isLoading, isNoData)
-        }
-        const formattedCurrentPair = formatPair(targetPair)
-        return (
-          <Cell tooltip={getTooltipContent(formattedCurrentPair, t)}>
-            {formattedCurrentPair}
-          </Cell>
-        )
-      },
-      copyText: () => formatPair(targetPair),
+    isNumericValue: true,
+    copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
+  },
+  {
+    id: 'pair',
+    name: 'column.pair',
+    className: 'align-left',
+    width: getColumnWidth('pair', columnsWidth),
+    renderer: () => {
+      if (isLoading || isNoData) return getCellState(isLoading, isNoData)
+      return getCell(formatPair(targetPair), t)
     },
-  ]
-}
+    copyText: () => formatPair(targetPair),
+  },
+]
diff --git a/src/components/PublicTrades/PublicTrades.js b/src/components/PublicTrades/PublicTrades.js
index f036b4e85..c8a383a02 100644
--- a/src/components/PublicTrades/PublicTrades.js
+++ b/src/components/PublicTrades/PublicTrades.js
@@ -20,7 +20,7 @@ import SyncPrefButton from 'ui/SyncPrefButton'
 import queryConstants from 'state/query/constants'
 import { checkInit, checkFetch, setPair } from 'state/utils'
 
-import getColumns from './PublicTrades.columns'
+import { getColumns } from './PublicTrades.columns'
 import { propTypes, defaultProps } from './PublicTrades.props'
 
 const TYPE = queryConstants.MENU_PUBLIC_TRADES
diff --git a/src/ui/JSONFormat/_JSONFormat.scss b/src/ui/JSONFormat/_JSONFormat.scss
index 92fa01aa6..0b16ca493 100644
--- a/src/ui/JSONFormat/_JSONFormat.scss
+++ b/src/ui/JSONFormat/_JSONFormat.scss
@@ -1,5 +1,5 @@
 .json-format {
-  width: #{"max(500px, 40vw);"};
+  max-width: 500px;
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-all;
diff --git a/src/ui/utils.js b/src/ui/utils.js
index 02ffa45ef..313df0d05 100644
--- a/src/ui/utils.js
+++ b/src/ui/utils.js
@@ -10,6 +10,18 @@ export const amountStyle = (amount) => {
   })
 }
 
+export const formatType = (type, amount) => {
+  const classes = amountStyle(amount)
+  return (
+    // Fragment fixes blueprint's parentCellHeight warnings
+    <>
+      <span className={classes}>
+        {type}
+      </span>
+    </>
+  )
+}
+
 export const insertIf = (condition, ...elements) => (condition ? elements : [])
 
 export const filterSelectorItem = (query, item) => item.toLowerCase().indexOf(query.toLowerCase()) >= 0
diff --git a/src/utils/columns.js b/src/utils/columns.js
index b6bd1fcdb..ac451707a 100644
--- a/src/utils/columns.js
+++ b/src/utils/columns.js
@@ -10,6 +10,7 @@ import _forEach from 'lodash/forEach'
 import { Cell } from '@blueprintjs/table'
 import { get, pick, isEqual } from '@bitfinex/lib-js-util-base'
 
+import JSONFormat from 'ui/JSONFormat'
 import { formatAmount, fixedFloat } from 'ui/utils'
 import LoadingPlaceholder from 'ui/LoadingPlaceholder'
 
@@ -244,6 +245,32 @@ export const getCell = (content, t, tooltip) => {
   )
 }
 
+export const getJsonFormattedCell = (value) => {
+  const formattedValue = JSON.stringify(value, undefined, 2)
+  return (
+    <Cell>
+      <JSONFormat content={formattedValue}>
+        {formattedValue }
+      </JSONFormat>
+    </Cell>
+  )
+}
+
+export const getLinkCell = (link) => (
+  <Cell>
+    <>
+      <a
+        target='_blank'
+        href={`${link}`}
+        rel='noopener noreferrer'
+      >
+        {link}
+      </a>
+    </>
+  </Cell>
+)
+
+
 export const getRowsConfig = (isLoading, isNoData, numRows = 0) => {
   if (isLoading) return 5
   if (isNoData) return 1