diff --git a/playground/style.css b/playground/style.css
index 62136d8..577b2fc 100644
--- a/playground/style.css
+++ b/playground/style.css
@@ -1439,6 +1439,7 @@
   line-height: 1.33;
   letter-spacing: 0.5px;
   color: #003b5c;
+  text-align:left !important;
 }
 
 
@@ -1468,8 +1469,40 @@
   padding:16px 0px 16px 16px !important;
   font-weight: bold;
   background-color: #f5f7f7;
-  border: solid 1px #bdc1c5 !important;
-  border-right-style:hidden !important;
+  border: solid 1px #bdc1c5;
+}
+
+.customTable-expandedContent {
+  margin: 12px;
+  background-color: #ffffff;
+}
+
+.customTable-expandedItems {
+  font-family: Muli , sans-serif;
+  font-size: 12px;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: 0.5px;
+  color: #003b5c;
+}
+
+.customTable-itemHeading {
+  font-weight: bold;
+  padding: 8px;
+}
+
+#root_procedureCodes .react-bs-table .table-bordered>thead>tr:first-child>td, .react-bs-table .table-bordered>thead>tr:first-child>th {
+  background-color: #f5f7f7;
+  border: solid 1px #dadada !important;
+  border-right-style: hidden !important;
+  border-bottom-width: 0px !important;
+}
+
+#root_procedureCodes .react-bs-table .table-bordered>tbody>tr >td:first-child {
+  background-color: #ffffff;
+  border: solid 1px #dadada !important;
+  border-right-style: hidden !important;
   border-bottom-width: 0px !important;
 }
 
@@ -1479,4 +1512,3 @@
   margin: 0px 0 0px 26px;
   object-fit: contain;
 }
-
diff --git a/src/table/columnHeadersFactory.js b/src/table/columnHeadersFactory.js
index 459a8f5..94d418d 100644
--- a/src/table/columnHeadersFactory.js
+++ b/src/table/columnHeadersFactory.js
@@ -79,8 +79,8 @@ const toDataFormat = (fieldProp, fieldUIProp, defaultFilterKey) => {
     fieldUIProp !== undefined &&
     fieldUIProp.columnCustomFormat !== undefined
   ) {
-    if (fieldUIProp.columnCustomFormat === "description") {
-      return (_, row) => `${row.code}-${row.description}`;
+    if (fieldUIProp.columnCustomFormat === "combineCodeAndDesc") {
+      return (_, row) => `${row.code} - ${row.description}`;
     }
     let columnCustomFormat = JSON.parse(fieldUIProp.columnCustomFormat);
     let funcBody = JSON.parse(
diff --git a/src/table/index.js b/src/table/index.js
index 1f10a98..16195c8 100644
--- a/src/table/index.js
+++ b/src/table/index.js
@@ -305,8 +305,8 @@ class TableField extends Component {
           });
           return (
             isComponentDataAvailable && (
-              <div className="expandedItems">
-                <span className="itemHeading">{title} :</span>
+              <div className="customTable-expandedItems">
+                <span className="customTable-itemHeading">{title} :</span>
                 <br />
                 <ul>{tableListData}</ul>
               </div>
@@ -333,8 +333,8 @@ class TableField extends Component {
           });
           return (
             isComponentDataAvailable && (
-              <div className="expandedItems">
-                <span className="itemHeading">{title} :</span>
+              <div className="customTable-expandedItems">
+                <span className="customTable-itemHeading">{title} :</span>
                 <br />
                 <ul>{tableListData}</ul>
               </div>
@@ -343,7 +343,7 @@ class TableField extends Component {
         }
       }
     });
-    return <div className="expandedContent">{tableList}</div>;
+    return <div className="customTable-expandedContent">{tableList}</div>;
   }
   expandColumnComponent({ isExpandableRow, isExpanded }) {
     let icon = <span className={`fa fa-plus glyphicon`} />;