diff --git a/src/cellmanager.js b/src/cellmanager.js
index e0b9872..ff459c4 100644
--- a/src/cellmanager.js
+++ b/src/cellmanager.js
@@ -147,7 +147,11 @@ export default class CellManager {
 
     bindCopyCellContents() {
         this.keyboard.on('ctrl+c', () => {
-            this.copyCellContents(this.$focusedCell, this.$selectionCursor);
+            const noOfCellsCopied = this.copyCellContents(this.$focusedCell, this.$selectionCursor);
+            const message = `${noOfCellsCopied} cell${noOfCellsCopied > 1 ? 's' : ''} copied`;
+            if (noOfCellsCopied) {
+                this.instance.showToastMessage(message, 2);
+            }
         });
     }
 
@@ -230,22 +234,20 @@ export default class CellManager {
             colIndex,
             rowIndex
         } = $.data($cell);
-        const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
-        const colHeaderSelector = `.dt-header .dt-cell[data-col-index="${colIndex}"]`;
-        const rowHeaderSelector = `.dt-cell[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
+
+        const srNoColIndex = this.datamanager.getColumnIndexById('_rowIndex');
+        const colHeaderSelector = `.dt-cell--header-${colIndex}`;
+        const rowHeaderSelector = `.dt-cell--${srNoColIndex}-${rowIndex}`;
 
         if (this.lastHeaders) {
-            $.removeStyle(this.lastHeaders, 'backgroundColor');
+            this.lastHeaders.forEach(header => header.classList.remove('dt-cell--highlight'));
         }
 
         const colHeader = $(colHeaderSelector, this.wrapper);
         const rowHeader = $(rowHeaderSelector, this.wrapper);
 
-        $.style([colHeader, rowHeader], {
-            backgroundColor: '#f5f7fa' // light-bg
-        });
-
         this.lastHeaders = [colHeader, rowHeader];
+        this.lastHeaders.forEach(header => header.classList.add('dt-cell--highlight'));
     }
 
     selectAreaOnClusterChanged() {
@@ -504,13 +506,13 @@ export default class CellManager {
             } = $.data($cell1);
             const cell = this.getCell(colIndex, rowIndex);
             copyTextToClipboard(cell.content);
-            return;
+            return 1;
         }
         const cells = this.getCellsInRange($cell1, $cell2);
 
-        if (!cells) return;
+        if (!cells) return 0;
 
-        const values = cells
+        const rows = cells
             // get cell objects
             .map(index => this.getCell(...index))
             // convert to array of rows
@@ -521,13 +523,18 @@ export default class CellManager {
                 acc[rowIndex].push(curr.content);
 
                 return acc;
-            }, [])
+            }, []);
+
+        const values = rows
             // join values by tab
             .map(row => row.join('\t'))
             // join rows by newline
             .join('\n');
 
         copyTextToClipboard(values);
+
+        // return no of cells copied
+        return rows.reduce((total, row) => total + row.length, 0);
     }
 
     activateFilter(colIndex) {
@@ -580,7 +587,7 @@ export default class CellManager {
         }
 
         if (!$aboveRow) return $cell;
-        return $(`[data-col-index="${colIndex}"]`, $aboveRow);
+        return $(`.dt-cell--col-${colIndex}`, $aboveRow);
     }
 
     getBelowCell$($cell) {
@@ -594,7 +601,7 @@ export default class CellManager {
         }
 
         if (!$belowRow) return $cell;
-        return $(`[data-col-index="${colIndex}"]`, $belowRow);
+        return $(`.dt-cell--col-${colIndex}`, $belowRow);
     }
 
     getLeftCell$($cell) {
@@ -625,10 +632,6 @@ export default class CellManager {
         return this.instance.datamanager.getCell(colIndex, rowIndex);
     }
 
-    getCellAttr($cell) {
-        return this.instance.getCellAttr($cell);
-    }
-
     getRowHeight() {
         return $.style($('.dt-row', this.bodyScrollable), 'height');
     }
@@ -661,9 +664,16 @@ export default class CellManager {
             isFilter
         });
 
+        const isBodyCell = !(isHeader || isFilter);
+
         const className = [
             'dt-cell',
-            isHeader ? 'dt-cell--header' : ''
+            'dt-cell--col-' + colIndex,
+            isBodyCell ? `dt-cell--${colIndex}-${rowIndex}` : '',
+            isBodyCell ? 'dt-cell--row-' + rowIndex : '',
+            isHeader ? 'dt-cell--header' : '',
+            isHeader ? `dt-cell--header-${colIndex}` : '',
+            isFilter ? 'dt-cell--filter' : ''
         ].join(' ');
 
         return `
@@ -676,11 +686,12 @@ export default class CellManager {
     getCellContent(cell) {
         const {
             isHeader,
-            isFilter
+            isFilter,
+            colIndex
         } = cell;
 
         const editable = !isHeader && cell.editable !== false;
-        const editCellHTML = editable ? this.getEditCellHTML() : '';
+        const editCellHTML = editable ? this.getEditCellHTML(colIndex) : '';
 
         const sortable = isHeader && cell.sortable !== false;
         const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
@@ -717,8 +728,13 @@ export default class CellManager {
             }
         }
 
+        const className = [
+            'dt-cell__content',
+            isHeader ? `dt-cell__content--header-${colIndex}` : `dt-cell__content--col-${colIndex}`
+        ].join(' ');
+
         return `
-            <div class="dt-cell__content">
+            <div class="${className}">
                 ${contentHTML}
                 ${sortIndicator}
                 ${resizeColumn}
@@ -728,11 +744,11 @@ export default class CellManager {
         `;
     }
 
-    getEditCellHTML() {
-        return '<div class="dt-cell__edit"></div>';
+    getEditCellHTML(colIndex) {
+        return `<div class="dt-cell__edit dt-cell__edit--col-${colIndex}"></div>`;
     }
 
     selector(colIndex, rowIndex) {
-        return `.dt-cell[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
+        return `.dt-cell--${colIndex}-${rowIndex}`;
     }
 }
diff --git a/src/columnmanager.js b/src/columnmanager.js
index 168fa8c..0ab057b 100644
--- a/src/columnmanager.js
+++ b/src/columnmanager.js
@@ -30,7 +30,7 @@ export default class ColumnManager {
 
     refreshHeader() {
         const columns = this.datamanager.getColumns();
-        const $cols = $.each('.dt-cell[data-is-header]', this.header);
+        const $cols = $.each('.dt-cell--header', this.header);
 
         const refreshHTML =
             // first init
@@ -331,8 +331,8 @@ export default class ColumnManager {
 
         let index = this._columnWidthMap[colIndex];
         const selector = [
-            `[data-col-index="${colIndex}"] .dt-cell__content`,
-            `[data-col-index="${colIndex}"] .dt-cell__edit`
+            `.dt-cell__content--col-${colIndex}`,
+            `.dt-cell__edit--col-${colIndex}`
         ].join(', ');
 
         const styles = {
@@ -349,7 +349,7 @@ export default class ColumnManager {
     setColumnHeaderWidth(colIndex) {
         colIndex = +colIndex;
         this.$columnMap = this.$columnMap || [];
-        const selector = `.dt-header [data-col-index="${colIndex}"] .dt-cell__content`;
+        const selector = `.dt-cell__content--header-${colIndex}`;
         const {
             width
         } = this.getColumn(colIndex);
@@ -373,19 +373,13 @@ export default class ColumnManager {
     }
 
     getHeaderCell$(colIndex) {
-        return $(`.dt-cell[data-col-index="${colIndex}"]`, this.header);
+        return $(`.dt-cell--header-${colIndex}`, this.header);
     }
 
     getLastColumnIndex() {
         return this.datamanager.getColumnCount() - 1;
     }
 
-    getSerialColumnIndex() {
-        const columns = this.datamanager.getColumns();
-
-        return columns.findIndex(column => column.content.includes('Sr. No'));
-    }
-
     getDropdownHTML() {
         const { dropdownButton, headerDropdown: dropdownItems } = this.options;
 
@@ -399,5 +393,5 @@ export default class ColumnManager {
                 </div>
             </div>
       `;
-    };
+    }
 }