[#3] Allow methods for customizing value title, class name, and label…

… format
sematext · Nov 2, 2016 · 4239b02 · 4239b02
1 parent 98f9cc4
commit 4239b02
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,8 @@
+.col-unknown,
+.col-unknown > span {
+  color: red;
+}
+.col-active,
+.col-active > span {
+  color: blue;
+}