Skip to content
Permalink
Browse files

add icon to data-table cell

  • Loading branch information...
Dottenpixel committed Sep 28, 2017
1 parent b7ce522 commit 59c44b29cc837b0960578bc5fb8f090855c5aa79
Showing with 28 additions and 5 deletions.
  1. +11 −4 ui/components/data-tables/advanced/example.jsx
  2. +17 −1 ui/components/data-tables/index.jsx
@@ -34,7 +34,9 @@ const rows = [
stage: 'Value Proposition',
confidence: '30%',
amount: '$25,000,000',
contact: 'jrogers@acme.com'
contact: 'jrogers@acme.com',
amountScore: 'positive',
amountScoreLabel: 'High'
},
{
recordName: 'Acme - 200 Widgets',
@@ -52,7 +54,9 @@ const rows = [
stage: 'Id. Decision Makers',
confidence: '70%',
amount: '$25,000',
contact: 'nathan@salesforce.com'
contact: 'nathan@salesforce.com',
amountScore: 'negative',
amountScoreLabel: 'Low'
}
];

@@ -297,8 +301,8 @@ export let examples = [

export let examples = [
{
id: 'header-icon',
label: 'Column Header Icon',
id: 'header-and-cell-icon',
label: 'Header and Cell Icon',
element: (
<Table>
<Thead
@@ -318,6 +322,9 @@ export let examples = [
confidence={rows[i].confidence}
amount={rows[i].amount}
contact={rows[i].contact}
amountScore={rows[i].amountScore}
amountScoreLabel={rows[i].amountScoreLabel}
hasScores
/>
))}
</tbody>
@@ -13,6 +13,7 @@ import {
} from '../input/base/example';
import MediaObject from '../../utilities/media-objects/index.react';
import { Ellie } from '../dynamic-icons/ellie/example';
import { Score } from '../dynamic-icons/score/example';
import SvgIcon from '../../shared/svg-icon';

export const InlineEditTableContainer = props => (
@@ -257,10 +258,13 @@ export const ErrorsTh = props => (
* @param {*} props
* @prop {boolean} actionableMode - Specifies whether the grid is in actionable or navigation mode
* @prop {boolean} hasFocus - Specifies whether a specific cell is in focus
* @prop {boolean} hasScore - Specifies whether a row has a score cell
* @prop {boolean} rowSelected
* @prop {integer} index - Row index in the Grid
* @prop {string} accountName
* @prop {string} amount
* @prop {string} amountScore
* @prop {string} amountScoreLabel
* @prop {string} className - CSS classes for the tr element
* @prop {string} closeDate
* @prop {string} confidence
@@ -291,7 +295,19 @@ export const AdvancedDataTableTr = props => (
<ReadOnlyTd cellText={props.closeDate} />
<ReadOnlyTd cellText={props.stage} />
<ReadOnlyTd cellText={props.confidence} />
<ReadOnlyTd cellText={props.amount} />
{props.hasScores && props.amountScore && props.amountScoreLabel ? (
<AdvancedDataTableTd>
<div className="slds-grid slds-grid_vertical-align-center">
<div className="slds-truncate">{props.amount}</div>
<div className="slds-icon_container slds-m-left_x-small slds-m-right_xx-small">
<Score data-slds-state={props.amountScore} />
</div>
<div className="slds-truncate">{props.amountScoreLabel}</div>
</div>
</AdvancedDataTableTd>
) : (
<ReadOnlyTd cellText={props.amount} />
)}
<ReadOnlyTd
actionableMode={props.actionableMode}
cellLink="javascript:void(0);"

0 comments on commit 59c44b2

Please sign in to comment.
You can’t perform that action at this time.