Skip to content

Commit

Permalink
add icon to data-table cell
Browse files Browse the repository at this point in the history
  • Loading branch information
Dottenpixel committed Oct 6, 2017
1 parent b7ce522 commit 59c44b2
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 5 deletions.
15 changes: 11 additions & 4 deletions ui/components/data-tables/advanced/example.jsx
Expand Up @@ -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',
Expand All @@ -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'
}
];

Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down
18 changes: 17 additions & 1 deletion ui/components/data-tables/index.jsx
Expand Up @@ -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 => (
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);"
Expand Down

0 comments on commit 59c44b2

Please sign in to comment.