diff --git a/src/selectors.js b/src/selectors.js index f764dcd..f6ef362 100644 --- a/src/selectors.js +++ b/src/selectors.js @@ -110,15 +110,28 @@ export default (tableName) => { _.forOwn(values, (columnValues, key) => { columnValues.forEach(value => { - let labelValue = value; - if (_.isBoolean(value)) { - labelValue = value ? 'Yes' : 'No'; - } + const column = columnMap[key]; + const { + getValueTitle = () => undefined, + getValueClassName = () => undefined, + getValueLabel = () => { + let labelValue = value; + if (_.isBoolean(value)) { + labelValue = value ? 'Yes' : 'No'; + } + return `${column.header}:${labelValue}`; + }, + } = column; + const title = getValueTitle(value); + const label = getValueLabel(value); + const className = getValueClassName(value); options.push({ - label: `${columnMap[key].header}:${labelValue}`, - valueFilter: true, - value, key, + label, + value, + title, + className, + valueFilter: true, }); }); }); diff --git a/stories/UsersTable.js b/stories/UsersTable.js index 2dccdb9..524a0a6 100644 --- a/stories/UsersTable.js +++ b/stories/UsersTable.js @@ -1,14 +1,30 @@ import React, { Component } from 'react'; import sematable, { Table } from '../src'; import YesNo from './YesNo.js'; +import './style.css'; export const USERS_TABLE = 'usersTable'; const columns = [ { key: 'id', primaryKey: true, header: 'ID' }, { key: 'firstName', header: 'First name', filterable: true, sortable: true }, { key: 'lastName', header: 'Last name', filterable: true, sortable: true }, - { key: 'status', header: 'Status', taggable: true }, - { key: 'confirmed', header: 'Confirmed', taggable: true, Component: YesNo }, + { + key: 'status', + header: 'Status', + taggable: true, + getValueTitle: (value) => ({ + UNKNOWN: 'Gone missing users', + ACTIVE: 'Active users', + }[value]), + getValueClassName: (value) => `col-${value.toLowerCase()}`, + }, + { + key: 'confirmed', + header: 'Confirmed', + Component: YesNo, + taggable: true, + getValueTitle: (value) => value ? 'Confirmed' : 'Not confirmed', + }, ]; class UsersTable extends Component { diff --git a/stories/style.css b/stories/style.css new file mode 100644 index 0000000..8cdeffa --- /dev/null +++ b/stories/style.css @@ -0,0 +1,8 @@ +.col-unknown, +.col-unknown > span { + color: red; +} +.col-active, +.col-active > span { + color: blue; +}