wip

2019-08-11 18:01:41 +05:30
32 changed files with 1718 additions and 4295 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.eslintrc
+++ b/.eslintrc
@ -35,6 +35,7 @@
    "block-scoped-var": 2,
    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
    "camelcase": [2, { "properties": "always" }],
+    "comma-dangle": [2, "never"],
    "comma-spacing": [2, { "before": false, "after": true }],
    "comma-style": [2, "last"],
    "complexity": 0,
--- a/.github/workflows/test-and-release.yml
+++ b/.github/workflows/test-and-release.yml
@ -1,24 +0,0 @@
-name: Test and Release
-on:
-  push:
-    branches:
-      - master
-jobs:
-  test-and-release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Lint, build and test
-        uses: cypress-io/github-action@v2
-        with:
-          build: yarn lint-and-build
-          start: yarn cy:server
-          record: true
-        env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Release
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn semantic-release
--- a/.github/workflows/test-pull-request.yml
+++ b/.github/workflows/test-pull-request.yml
@ -1,16 +0,0 @@
-name: Test Pull Request
-on: pull_request
-jobs:
-  test-pull-request:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Lint, build and test
-        uses: cypress-io/github-action@v2
-        with:
-          build: yarn lint-and-build
-          start: yarn cy:server
-          record: true
-        env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.mergify.yml
+++ b/.mergify.yml
@ -0,0 +1,8 @@
+pull_request_rules:
+  - name: automatic merge on CI success and review
+    conditions:
+      - status-success=continuous-integration/travis-ci/pr
+      - "#approved-reviews-by>=1"
+    actions:
+      merge:
+        method: merge
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,21 @@
+language: node_js
+node_js:
+  - 8
+cache:
+  directories:
+    - ~/.npm
+    - ~/.cache
+    - node_modules
+branches:
+  only:
+    - master
+notifications:
+  email: false
+install:
+  - npm install
+script:
+  - npm run lint
+  - npm run build
+  - npm run test
+after_success:
+  - npm run semantic-release
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 The MIT License

-Copyright (c) 2018 Frappe Technologies Pvt. Ltd. <developers@frappe.io>
+Copyright (c) 2018 Frappé Technologies Pvt. Ltd. <developers@frappe.io>

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -1,37 +1,57 @@
-<div align="center" markdown="1">
+<div align="center">
+    <img src="https://github.com/frappe/design/raw/master/logos/logo-2019/frappe-datatable-logo.png" height="128">
+    <h2>Frappe DataTable</h2>
+    <p align="center">
+    <p>
+    A modern datatable library for the web
+    </p>

-<img width="80" alt="datatable-logo" src="https://github.com/user-attachments/assets/8235f4b9-993a-4329-97de-9431dcf63aae" >
-
-<h1>Frappe DataTable</h1>
-
-**A modern datatable library for the web**
-
-[![Test and Release](https://github.com/frappe/datatable/workflows/Test%20and%20Release/badge.svg)](https://github.com/frappe/datatable/actions?query=workflow%3A%22Test+and+Release%22)
+[![travis build](https://api.travis-ci.com/frappe/datatable.svg?branch=master)](https://travis-ci.org/frappe/datatable)
 [![npm version](https://badge.fury.io/js/frappe-datatable.svg)](https://badge.fury.io/js/frappe-datatable)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
 ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/frappe-datatable.svg)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)


-![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)
-
 </div>

-## Frappe Datatable
+## Introduction

-Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for [ERPNext](https://github.com/frappe/erpnext), it can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation. It does not require jQuery, unlike most data grids out there.
+Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for [ERPNext](https://github.com/frappe/erpnext), it can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation. It does not require jQuery, like most data grids out there.

-### Motivation
+## Demo

-I was trying to remove all legacy UI components from the [frappe](https://github.com/frappe/frappe) codebase. We were using [SlickGrid](https://github.com/mleibman/SlickGrid) for rendering tables. It was unmaintained and UI was dated. Other datatable solutions either didn't have the features we needed or were closed source. So we built our own.
+![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)

+## Features

-### Key Features
+### Cell Features

- **Cell**: Enable editing within individual cells and features like custom formatters, inline editing, and mouse selection. Users can easily copy cell content, navigate through cells using the keyboard, and take advantage of a custom cell editor for advanced functionality.
- **Column**: Columns are highly flexible, allowing users to reorder, resize, and sort them with ease. Additional features include hiding/removing columns and adding custom actions.
- **Row**: Rows support advanced interactions, including row selection, tree-structured organization, and inline filters for precise control. They handle large datasets efficiently with dynamic row heights.
+* Custom Formatters
+* Inline Editing
+* Mouse Selection
+* Copy Cells
+* Keyboard Navigation
+* Custom Cell Editor

+### Column Features

-## Usage
+* Reorder Columns
+* Sort by Column
+* Remove / Hide Column
+* Custom Actions
+* Resize Column
+* Flexible Layout
+
+### Row Features
+
+* Row Selection
+* Tree Structured Rows
+* Inline Filters
+* Large Number of Rows
+* Dynamic Row Height
+
+## Install

 ```bash
 yarn add frappe-datatable
@ -41,6 +61,7 @@ npm install frappe-datatable

 > Note: [`sortablejs`](https://github.com/RubaXa/Sortable) is required to be installed as well.

+## Usage

 ```js
 const datatable = new DataTable('#datatable', {
@ -52,24 +73,18 @@ const datatable = new DataTable('#datatable', {
 });
 ```

-## Development Setup
+## Contribution

 * `yarn start` - Start dev server
 * Open `index.html` located in the root folder, and start development.
 * Run `yarn lint` before committing changes
 * This project uses [commitizen](https://github.com/commitizen/cz-cli) for conventional commit messages, use `yarn commit` command instead of `git commit`

-## Links
+## Read the blog

- [Making a new datatable for the web](https://medium.com/frapp%C3%A9-thoughts/things-i-learned-building-a-library-for-the-web-6846a588bf53)
+[Making a new datatable for the web](https://medium.com/frapp%C3%A9-thoughts/things-i-learned-building-a-library-for-the-web-6846a588bf53)

-<br>
-<br>
-<div align="center" style="padding-top: 0.75rem;">
-	<a href="https://frappe.io" target="_blank">
-		<picture>
-			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
-			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
-		</picture>
-	</a>
-</div>
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
--- a/cypress.json
+++ b/cypress.json
@ -1,4 +1,3 @@
 {
-    "baseUrl": "http://localhost:8989",
-    "projectId": "2nsyux"
+    "baseUrl": "http://localhost:8989"
 }
--- a/cypress/integration/cell.js
+++ b/cypress/integration/cell.js
@ -32,7 +32,7 @@ describe('Cell', function () {
    });

    it('edit cell', function () {
-        cy.getCell(4, 1).dblclick({ force: true });
+        cy.getCell(4, 1).dblclick();
        cy.getCell(4, 1).find('input').click();
        cy.focused().type('{selectall}{del}Test{enter}');
        cy.getCell(4, 1).contains('Test');
@ -61,7 +61,7 @@ describe('Cell', function () {
        cy.clickCell(2, 0)
            .type('{ctrl}{rightarrow}');
        cy.get('.dt-cell--focus')
-            .should('have.class', 'dt-cell--11-0');
+            .should('have.class', 'dt-cell--7-0');
    });

    it('cell selection using shift + arrow keys', function () {
--- a/cypress/integration/column.js
+++ b/cypress/integration/column.js
@ -29,35 +29,35 @@ describe('Column', function () {
            .its('currentSort.colIndex')
            .should('eq', 2);

-        cy.get('.dt-scrollable .dt-row:first div:nth-of-type(3)')
+        cy.get('.dt-scrollable .dt-row:first')
            .contains('Airi Satou');

        cy.clickDropdownItem(2, 'Reset sorting');
    });

    it('removes column using dropdown action', function () {
-        cy.get('.dt-cell--header').should('have.length', 12);
+        cy.get('.dt-cell--header').should('have.length', 8);

        cy.clickDropdown(5);
        cy.clickDropdownItem(5, 'Remove column');

-        cy.get('.dt-cell--header').should('have.length', 11);
+        cy.get('.dt-cell--header').should('have.length', 7);
    });

    it('resize column with mouse drag', function () {
-        cy.get('.dt-cell--header-4 .dt-cell__resize-handle').as('resize-handle');
+        cy.get('.dt-cell--header-3 .dt-cell__resize-handle').as('resize-handle');
        cy
            .get('@resize-handle')
            .trigger('mousedown')
-            .trigger('mousemove', { pageX: 700, pageY: 20, which: 1 })
+            .trigger('mousemove', { pageX: 510, pageY: 20, which: 1 })
            .trigger('mouseup');

-        cy.getColumnCell(4).invoke('css', 'width').then((width) => {
-            cy.getColumnCell(4)
-                .should('have.css', 'width', width);
-            cy.getCell(4, 1)
-                .should('have.css', 'width', width);
-        });
+        cy.getColumnCell(3)
+            .should('have.css', 'width')
+            .and('match', /13\dpx/);
+        cy.getCell(3, 1)
+            .should('have.css', 'width')
+            .and('match', /13\dpx/);
    });

    it('resize column using double click', function () {
--- a/cypress/integration/inline_filters.js
+++ b/cypress/integration/inline_filters.js
@ -14,36 +14,36 @@ describe('Inline Filters', function () {
        cy.getCell(4, 0).click().type('{ctrl}f');

        cy.get('@filterInput4').type('edin');
-        cy.get('.dt-row-0').should('be.visible');
-        cy.get('.dt-row-1').should('not.exist');
+        cy.get('.dt-row[data-row-index=0]').should('be.visible');
+        cy.get('.dt-row[data-row-index=1]').should('not.be.visible');
        cy.get('@filterInput4').clear();
    });

    it('simple number filter', function () {
        cy.get('@filterInput5').type('2360');
        cy.get('.dt-row[data-row-index=8]').should('be.visible');
-        cy.get('.dt-row[data-row-index=15]').should('not.exist');
-        cy.get('.dt-row[data-row-index=22]').should('not.exist');
+        cy.get('.dt-row[data-row-index=15]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=22]').should('not.be.visible');
        cy.get('@filterInput5').clear();
    });

    it('greater than', function () {
        cy.get('@filterInput5').type('> 6000');
-        cy.get('.dt-row[data-row-index=0]').should('not.exist');
+        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
        cy.get('.dt-row[data-row-index=3]').should('be.visible');
        cy.get('@filterInput5').clear();
    });

    it('less than', function () {
        cy.get('@filterInput5').type('< 2000');
-        cy.get('.dt-row[data-row-index=0]').should('not.exist');
+        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
        cy.get('.dt-row[data-row-index=51]').should('be.visible');
        cy.get('@filterInput5').clear();
    });

    it('range', function () {
        cy.get('@filterInput5').type(' 2000: 5000');
-        cy.get('.dt-row[data-row-index=4]').should('not.exist');
+        cy.get('.dt-row[data-row-index=4]').should('not.be.visible');
        cy.get('.dt-row[data-row-index=5]').should('be.visible');
        cy.get('@filterInput5').clear();
    });
@ -58,15 +58,16 @@ describe('Inline Filters', function () {
        cy.get('@filterInput4').type('to');
        cy.get('@filterInput5').type('54');

+        cy.get('.dt-row[data-row-index=0]').should('be.visible');
        cy.get('.dt-row[data-row-index=4]').should('be.visible');
-        cy.get('.dt-row[data-row-index=1]').should('not.exist');
+        cy.get('.dt-row[data-row-index=1]').should('not.be.visible');
        cy.get('@filterInput4').clear();
        cy.get('@filterInput5').clear();
    });

    it('greater than for string type filters', function () {
        cy.get('@filterInput6').type('> 01/07/2011');
-        cy.get('.dt-row[data-row-index=0]').should('not.exist');
+        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
        cy.get('.dt-row[data-row-index=1]').should('be.visible');
        cy.get('.dt-row[data-row-index=3]').should('be.visible');
        cy.get('.dt-row[data-row-index=5]').should('be.visible');
--- a/index.html
+++ b/index.html
@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>Frappe DataTable</title>
+	<title>Frappé DataTable</title>
 	<style>
 		body {
 			font-family: 'Tahoma';
@ -17,11 +17,9 @@
 </head>

 <body>
-	<h1>Frappe DataTable</h1>
-	<button onclick="datatable.render()">Render Table</button>
-	<button onclick="datatable.refresh()">Refresh Data</button>
+	<h1>Frappé DataTable</h1>
+	<button onclick="datatable.render()">Refresh</button>
 	<button onclick="switchToTreeView()" data-action="treeview">TreeView</button>
-    <button onclick="appendRows()">Append Rows</button>
 	<label>
 		<input type="checkbox" id="input-large-data" />
 		<span>Large Data</span>
@ -151,85 +149,21 @@

 			function buildData() {
 				columns = [
-					{ name: "Name", width: 150, sticky: true },
-					{ name: "Position", width: 200 },
-					{ name: "Office", sticky: true },
+					{ name: "Name" },
+					{ name: "Position" },
+					{ name: "Office" },
 					{ name: "Extn." },
-					{
-						name: "Start Date",
-						format: (value) => (value || '').split('/').reverse().join('/'),
-						compareValue: (cell, keyword) => {
-							const keywordValue = keyword.split('/').reverse().join('/')
-							return [+new Date(cell.content), +new Date(keywordValue)];
-						}
-					},
-					{ name: "Salary", format: value => formatMoney(value) },
-					{ name: "Department", width:200},
-					{ name: "Country"},
-					{ name: "Start date"},
-					{ name: "Bonus amount"}
-
+                    {
+                        name: "Start Date",
+                        format: (value) => (value || '').split('/').reverse().join('/'),
+                        compareValue: (cell, keyword) => {
+                            const keywordValue = keyword.split('/').reverse().join('/')
+                            return [+new Date(cell.content), +new Date(keywordValue)];
+                        }
+                    },
+					{ name: "Salary", format: value => formatMoney(value) }
 				];
-				data = [
-					["Tiger Nixon", { content: "System Architect<br>New line", editable: false }, "Edinburgh", 5421, "2011/04/25", 320800, "Engineering", "Germany", "2015/03/18", 10000],
-					["Garrett Winters", "Accountant", "Tokyo", 8422, "2011/07/25", 170750, "Finance", "USA", "2016/05/22", 8000],
-					["Ashton Cox", "Junior Technical Author", "San Francisco", 1562, "2009/01/12", 86000, "Documentation", "Canada", "2017/11/03", 3000],
-					["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", 6224, "2012/03/29", 433060, "Engineering", "Australia", "2014/07/09", 15000],
-					["Airi Satou", "Accountant", "Tokyo", 5407, "2008/11/28", 162700, "Finance", "Japan", "2012/02/12", 5000],
-					["Brielle Williamson", "Integration Specialist", "New York", 4804, "2012/12/02", 372000, "Engineering", "USA", "2015/08/14", 11000],
-					["Herrod Chandler", "Sales Assistant", "San Francisco", 9608, "2012/08/06", 137500, "Sales", "Germany", "2011/04/11", 2000],
-					["Rhona Davidson", "Integration Specialist", "Tokyo", 6200, "2010/10/14", 327900, "IT", "Singapore", "2013/01/19", 12000],
-					["Colleen Hurst", "Javascript Developer", "San Francisco", 2360, "2009/09/15", 205500, "Engineering", "France", "2012/06/08", 4000],
-					["Sonya Frost", "Software Engineer", "Edinburgh", 1667, "2008/12/13", 103600, "Engineering", "USA", "2014/10/30", 9000],
-					["Jena Gaines", "Office Manager", "London", 3814, "2008/12/19", 90560, "Operations", "England", "2016/09/22", 1500],
-					["Quinn Flynn", "Support Lead", "Edinburgh", 9497, "2013/03/03", 342000, "Customer Support", "Ireland", "2011/04/30", 7000],
-					["Charde Marshall", "Regional Director", "San Francisco", 6741, "2008/10/16", 470600, "Management", "USA", "2012/02/17", 30000],
-					["Haley Kennedy", "Senior Marketing Designer", "London", 3597, "2012/12/18", 313500, "Marketing", "UK", "2013/07/04", 12000],
-					["Tatyana Fitzpatrick", "Regional Director", "London", 1965, "2010/03/17", 385750, "Management", "Canada", "2011/11/08", 25000],
-					["Michael Silva", "Marketing Designer", "London", 1581, "2012/11/27", 198500, "Design", "UK", "2014/05/02", 4000],
-					["Paul Byrd", "Chief Financial Officer (CFO)", "New York", 3059, "2010/06/09", 725000, "Finance", "USA", "2012/03/11", 50000],
-					["Gloria Little", "Systems Administrator", "New York", 1721, "2009/04/10", 237500, "IT", "USA", "2015/09/13", 6000],
-					["Bradley Greer", "Software Engineer", "London", 2558, "2012/10/13", 132000, "Engineering", "Canada", "2013/01/22", 8000],
-					["Dai Rios", "Personnel Lead", "Edinburgh", 2290, "2012/09/26", 217500, "HR", "Germany", "2014/04/15", 4000],
-					["Jenette Caldwell", "Development Lead", "New York", 1937, "2011/09/03", 345000, "Engineering", "USA", "2012/12/05", 22000],
-					["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", 6154, "2009/06/25", 675000, "Marketing", "USA", "2013/10/18", 60000],
-					["Caesar Vance", "Pre-Sales Support", "New York", 8330, "2011/12/12", 106450, "Sales", "USA", "2014/11/11", 4000],
-					["Doris Wilder", "Sales Assistant", "Sidney", 3023, "2010/09/20", 85600, "Sales", "Australia", "2015/08/13", 2000],
-					["Angelica Ramos", "Chief Executive Officer (CEO)", "London", 5797, "2009/10/09", 1200000, "Management", "UK", "2012/09/04", 100000],
-					["Gavin Joyce", "Developer", "Edinburgh", 8822, "2010/12/22", 92575, "Engineering", "Canada", "2015/06/17", 7000],
-					["Jennifer Chang", "Regional Director", "Singapore", 9239, "2010/11/14", 357650, "Management", "Singapore", "2014/09/09", 15000],
-					["Brenden Wagner", "Software Engineer", "San Francisco", 1314, "2011/06/07", 206850, "Engineering", "USA", "2013/12/22", 5000],
-					["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", 2947, "2010/03/11", 850000, "Operations", "USA", "2014/02/08", 70000],
-					["Shou Itou", "Regional Marketing", "Tokyo", 8899, "2011/08/14", 163000, "Marketing", "Japan", "2013/10/04", 9000],
-					["Michelle House", "Integration Specialist", "Sidney", 2769, "2011/06/02", 95400, "Engineering", "Australia", "2014/01/17", 6000],
-					["Suki Burks", "Developer", "London", 6832, "2009/10/22", 114500, "Engineering", "UK", "2015/11/07", 7000],
-					["Prescott Bartlett", "Technical Author", "London", 3606, "2011/05/07", 145000, "Documentation", "England", "2014/03/11", 3000],
-					["Gavin Cortez", "Team Leader", "San Francisco", 2860, "2008/10/26", 235500, "Management", "USA", "2012/02/25", 18000],
-					["Martena Mccray", "Post-Sales support", "Edinburgh", 8240, "2011/03/09", 324050, "Support", "Scotland", "2014/08/21", 5000],
-					["Unity Butler", "Marketing Designer", "San Francisco", 5384, "2009/12/09", 85675, "Design", "USA", "2013/06/28", 1500],
-					["Howard Hatfield", "Office Manager", "San Francisco", 7031, "2008/12/16", 164500, "Operations", "Canada", "2014/09/02", 2000],
-					["Hope Fuentes", "Secretary", "San Francisco", 6318, "2010/02/12", 109850, "Administration", "USA", "2015/07/24", 4000],
-					["Vivian Harrell", "Financial Controller", "San Francisco", 9422, "2009/02/14", 452500, "Finance", "USA", "2014/01/10", 15000],
-					["Timothy Mooney", "Office Manager", "London", 7580, "2008/12/11", 136200, "Operations", "UK", "2012/10/25", 2000],
-					["Jackson Bradshaw", "Director", "New York", 1042, "2008/09/26", 645750, "Management", "USA", "2013/06/04", 50000],
-					["Olivia Liang", "Support Engineer", "Singapore", 2120, "2011/02/03", 234500, "Support", "Singapore", "2013/05/01", 4000],
-					["Bruno Nash", "Software Engineer", "London", 6222, "2011/05/03", 163500, "Engineering", "England", "2014/11/11", 7000],
-					["Sakura Yamamoto", "Support Engineer", "Tokyo", 9383, "2009/08/19", 139575, "Support", "Japan", "2013/12/03", 3000],
-					["Thor Walton", "Developer", "New York", 8327, "2013/08/11", 98540, "Engineering", "USA", "2014/09/14", 4000],
-					["Finn Camacho", "Support Engineer", "San Francisco", 2927, "2009/07/07", 87500, "Support", "USA", "2013/05/28", 2000],
-					["Serge Baldwin", "Data Coordinator", "Singapore", 8352, "2012/04/09", 138575, "IT", "Singapore", "2014/03/10", 6000],
-					["Zenaida Frank", "Software Engineer", "New York", 7439, "2010/01/04", 125250, "Engineering", "USA", "2012/12/15", 3000],
-					["Zorita Serrano", "Software Engineer", "San Francisco", 4389, "2012/06/01", 115000, "Engineering", "Canada", "2014/06/25", 2000],
-					["Jennifer Acosta", "Junior Javascript Developer", "Edinburgh", 3431, "2013/02/01", 75650, "Engineering", "UK", "2015/03/13", 1000],
-					["Cara Stevens", "Sales Assistant", "New York", 3990, "2011/12/06", 145600, "Sales", "USA", "2014/02/21", 2000],
-					["Hermione Butler", "Regional Director", "London", 1016, "2011/03/21", 356250, "Management", "UK", "2013/11/16", 50000],
-					["Lael Greer", "Systems Administrator", "London", 6733, "2009/02/27", 103500, "IT", "UK", "2014/12/08", 4000],
-					["Jonas Alexander", "Developer", "San Francisco", 8196, "2010/07/14", 86500, "Engineering", "USA", "2012/05/18", 1500],
-					["Shad Decker", "Regional Director", "Edinburgh", 6373, "2008/11/13", 183000, "Management", "Scotland", "2013/07/10", 25000],
-					["Michael Bruce", "Javascript Developer", "Singapore", 5384, "2011/06/27", 183000, "Engineering", "Singapore", "2014/02/15", 5000],
-					["Donna Snider", "Customer Support", "New York", 4226, "2011/01/25", 112000, "Support", "USA", "2013/12/07", 2000],
-					["Donna Snider", "Customer Support", "Los Angeles", 42.67, "2011/01/25", 112000, "Support", "USA", "2013/11/25", 1000]
-				]
+				data = [["Tiger Nixon", { content: "System Architect<br>New line", editable: false }, "Edinburgh", 5421, "2011/04/25", 320800], ["Garrett Winters", "Accountant", "Tokyo", 8422, "2011/07/25", 170750], ["Ashton Cox", "Junior Technical Author", "San Francisco", 1562, "2009/01/12", 86000], ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", 6224, "2012/03/29", 433060], ["Airi Satou", "Accountant", "Tokyo", 5407, "2008/11/28", 162700], ["Brielle Williamson", "Integration Specialist", "New York", 4804, "2012/12/02", 372000], ["Herrod Chandler", "Sales Assistant", "San Francisco", 9608, "2012/08/06", 137500], ["Rhona Davidson", "Integration Specialist", "Tokyo", 6200, "2010/10/14", 327900], ["Colleen Hurst", "Javascript Developer", "San Francisco", 2360, "2009/09/15", 205500], ["Sonya Frost", "Software Engineer", "Edinburgh", 1667, "2008/12/13", 103600], ["Jena Gaines", "Office Manager", "London", 3814, "2008/12/19", 90560], ["Quinn Flynn", "Support Lead", "Edinburgh", 9497, "2013/03/03", 342000], ["Charde Marshall", "Regional Director", "San Francisco", 6741, "2008/10/16", 470600], ["Haley Kennedy", "Senior Marketing Designer", "London", 3597, "2012/12/18", 313500], ["Tatyana Fitzpatrick", "Regional Director", "London", 1965, "2010/03/17", 385750], ["Michael Silva", "Marketing Designer", "London", 1581, "2012/11/27", 198500], ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", 3059, "2010/06/09", 725000], ["Gloria Little", "Systems Administrator", "New York", 1721, "2009/04/10", 237500], ["Bradley Greer", "Software Engineer", "London", 2558, "2012/10/13", 132000], ["Dai Rios", "Personnel Lead", "Edinburgh", 2290, "2012/09/26", 217500], ["Jenette Caldwell", "Development Lead", "New York", 1937, "2011/09/03", 345000], ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", 6154, "2009/06/25", 675000], ["Caesar Vance", "Pre-Sales Support", "New York", 8330, "2011/12/12", 106450], ["Doris Wilder", "Sales Assistant", "Sidney", 3023, "2010/09/20", 85600], ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", 5797, "2009/10/09", 1200000], ["Gavin Joyce", "Developer", "Edinburgh", 8822, "2010/12/22", 92575], ["Jennifer Chang", "Regional Director", "Singapore", 9239, "2010/11/14", 357650], ["Brenden Wagner", "Software Engineer", "San Francisco", 1314, "2011/06/07", 206850], ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", 2947, "2010/03/11", 850000], ["Shou Itou", "Regional Marketing", "Tokyo", 8899, "2011/08/14", 163000], ["Michelle House", "Integration Specialist", "Sidney", 2769, "2011/06/02", 95400], ["Suki Burks", "Developer", "London", 6832, "2009/10/22", 114500], ["Prescott Bartlett", "Technical Author", "London", 3606, "2011/05/07", 145000], ["Gavin Cortez", "Team Leader", "San Francisco", 2860, "2008/10/26", 235500], ["Martena Mccray", "Post-Sales support", "Edinburgh", 8240, "2011/03/09", 324050], ["Unity Butler", "Marketing Designer", "San Francisco", 5384, "2009/12/09", 85675], ["Howard Hatfield", "Office Manager", "San Francisco", 7031, "2008/12/16", 164500], ["Hope Fuentes", "Secretary", "San Francisco", 6318, "2010/02/12", 109850], ["Vivian Harrell", "Financial Controller", "San Francisco", 9422, "2009/02/14", 452500], ["Timothy Mooney", "Office Manager", "London", 7580, "2008/12/11", 136200], ["Jackson Bradshaw", "Director", "New York", 1042, "2008/09/26", 645750], ["Olivia Liang", "Support Engineer", "Singapore", 2120, "2011/02/03", 234500], ["Bruno Nash", "Software Engineer", "London", 6222, "2011/05/03", 163500], ["Sakura Yamamoto", "Support Engineer", "Tokyo", 9383, "2009/08/19", 139575], ["Thor Walton", "Developer", "New York", 8327, "2013/08/11", 98540], ["Finn Camacho", "Support Engineer", "San Francisco", 2927, "2009/07/07", 87500], ["Serge Baldwin", "Data Coordinator", "Singapore", 8352, "2012/04/09", 138575], ["Zenaida Frank", "Software Engineer", "New York", 7439, "2010/01/04", 125250], ["Zorita Serrano", "Software Engineer", "San Francisco", 4389, "2012/06/01", 115000], ["Jennifer Acosta", "Junior Javascript Developer", "Edinburgh", 3431, "2013/02/01", 75650], ["Cara Stevens", "Sales Assistant", "New York", 3990, "2011/12/06", 145600], ["Hermione Butler", "Regional Director", "London", 1016, "2011/03/21", 356250], ["Lael Greer", "Systems Administrator", "London", 6733, "2009/02/27", 103500], ["Jonas Alexander", "Developer", "San Francisco", 8196, "2010/07/14", 86500], ["Shad Decker", "Regional Director", "Edinburgh", 6373, "2008/11/13", 183000], ["Michael Bruce", "Javascript Developer", "Singapore", 5384, "2011/06/27", 183000], ["Donna Snider", "Customer Support", "New York", 4226, "2011/01/25", 112000], ["Donna Snider", "Customer Support", "LOS Angeles", 42.67, "2011/01/25", 112000]];

 				if (largeData) {
 					for (let i = 0; i < 10; i++) {
@ -247,25 +181,13 @@
 				var datatable = new DataTable('section', {
 					checkboxColumn: true,
 					serialNoColumn: true,
-					layout: 'fixed', // fluid / fixed
+					layout: 'fluid',
 					columns,
 					data,
 					inlineFilters: true,
 					dynamicRowHeight: true,
 					treeView: treeView,
 					showTotalRow: true,
-					// direction: 'rtl',
-					// language: 'myLang',
-					// translations: {
-					// 	myLang: {
-					// 		"Sort Ascending": "Sort low to high",
-					// 		"{count} cells copied": {
-					// 			"1": "1 cell was copied",
-					// 			"2": "2 cells were copied",
-					// 			"default": "Many cells were copied"
-					// 		}
-					// 	}
-					// },
 					// filterRows(keyword, cells, colIndex) {
 					// 	return cells
 					// 		.filter(cell => cell.content.includes(keyword))
@ -343,15 +265,6 @@
 				console.log(e)
 			}
 		};
-
-        function appendRows() {
-            datatable.appendRows(
-                [
-                    ["Garrett", "Accountant", "Tokyo", 8422, "2011/07/25", 170, "USA", "2013/10/25", 2000],
-                    ["Winters", "Accountant", "Tokyo", 8422, "2011/07/25", 123, "Scotland", "2013/11/25", 1000]
-                ]
-            )
-        }
 	</script>
 </body>

--- a/package.json
+++ b/package.json
@ -17,7 +17,6 @@
    "travis-deploy-once": "travis-deploy-once",
    "semantic-release": "semantic-release",
    "lint": "eslint src",
-    "lint-and-build": "yarn lint && yarn build",
    "commit": "npx git-cz"
  },
  "files": [
@ -27,7 +26,7 @@
  "devDependencies": {
    "autoprefixer": "^9.0.0",
    "chai": "3.5.0",
-    "cypress": "^9.2.0",
+    "cypress": "3.0.1",
    "cz-conventional-changelog": "^2.1.0",
    "deepmerge": "^2.0.1",
    "eslint": "^5.0.1",
@ -45,7 +44,7 @@
    "rollup-plugin-node-resolve": "^3.0.3",
    "rollup-plugin-postcss": "^1.2.8",
    "rollup-plugin-uglify-es": "^0.0.1",
-    "semantic-release": "^17.1.1",
+    "semantic-release": "^15.6.3",
    "start-server-and-test": "^1.4.1",
    "travis-deploy-once": "^5.0.1"
  },
@ -64,7 +63,7 @@
  "bugs": {
    "url": "https://github.com/frappe/datatable/issues"
  },
-  "homepage": "https://frappe.io/datatable",
+  "homepage": "https://frappe.github.io/datatable",
  "dependencies": {
    "hyperlist": "^1.0.0-beta",
    "lodash": "^4.17.5",
@ -75,4 +74,4 @@
      "path": "cz-conventional-changelog"
    }
  }
-}
+}
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@ -18,15 +18,11 @@ export default class BodyRenderer {

        if (rows.length === 0) {
            this.bodyScrollable.innerHTML = this.getNoDataHTML();
-            this.footer.innerHTML = '';
            return;
        }

-        // Create a temporary set for faster lookups.
-        // We can't change this.visibleRowIndices as it would be breaking for users.
-        let visibleRowIndicesSet = new Set(this.visibleRowIndices);
        const rowViewOrder = this.datamanager.rowViewOrder.map(index => {
-            if (visibleRowIndicesSet.has(index)) {
+            if (this.visibleRowIndices.includes(index)) {
                return index;
            }
            return null;
--- a/src/cellmanager.js
+++ b/src/cellmanager.js
@ -2,8 +2,7 @@ import {
    copyTextToClipboard,
    makeDataAttributeString,
    throttle,
-    linkProperties,
-    escapeHTML,
+    linkProperties
 } from './utils';
 import $ from './dom';
 import icons from './icons';
@ -20,13 +19,10 @@ export default class CellManager {
            'columnmanager',
            'rowmanager',
            'datamanager',
-            'keyboard',
-            'footer'
+            'keyboard'
        ]);

        this.bindEvents();
-        this.stickyRowWidth = 0;
-        this.stickyColWitdh = [];
    }

    bindEvents() {
@ -137,10 +133,7 @@ export default class CellManager {
    bindCopyCellContents() {
        this.keyboard.on('ctrl+c', () => {
            const noOfCellsCopied = this.copyCellContents(this.$focusedCell, this.$selectionCursor);
-            const message = this.instance.translate('{count} cells copied', {
-                count: noOfCellsCopied
-            });
-
+            const message = `${noOfCellsCopied} cell${noOfCellsCopied > 1 ? 's' : ''} copied`;
            if (noOfCellsCopied) {
                this.instance.showToastMessage(message, 2);
            }
@ -175,14 +168,6 @@ export default class CellManager {
            mouseDown = false;
        });

-        if (this.options.showTotalRow) {
-            $.on(this.footer, 'click', '.dt-cell', (e) => {
-
-                this.focusCell($(e.delegatedTarget));
-            });
-
-        }
-
        const selectArea = (e) => {
            if (!mouseDown) return;
            this.selectArea($(e.delegatedTarget));
@ -532,14 +517,11 @@ export default class CellManager {
                }

                promise = valuePromise.then((value) => {
+                    const done = editor.setValue(value, rowIndex, col);
                    const oldValue = this.getCell(colIndex, rowIndex).content;

-                    if (oldValue === value) return false;
-
-                    const done = editor.setValue(value, rowIndex, col);
-
                    // update cell immediately
-                    this.updateCell(colIndex, rowIndex, value, true);
+                    this.updateCell(colIndex, rowIndex, value);
                    $cell.focus();

                    if (done && done.then) {
@ -563,18 +545,10 @@ export default class CellManager {
            // copy only focusedCell
            const {
                colIndex,
-                rowIndex,
-                isTotalRow
+                rowIndex
            } = $.data($cell1);
-            let copiedContent = '';
-            if (isTotalRow) {
-                let choosenFooterCell = this.$focusedCell;
-                copiedContent = choosenFooterCell.children[0].title;
-            } else {
-                const cell = this.getCell(colIndex, rowIndex);
-                copiedContent = cell.content;
-            }
-            copyTextToClipboard(copiedContent);
+            const cell = this.getCell(colIndex, rowIndex);
+            copyTextToClipboard(cell.content);
            return 1;
        }
        const cells = this.getCellsInRange($cell1, $cell2);
@ -625,7 +599,7 @@ export default class CellManager {
            let rowIndex = i + focusedCell.rowIndex;
            row.forEach((cell, j) => {
                let colIndex = j + focusedCell.colIndex;
-                this.updateCell(colIndex, rowIndex, cell, true);
+                this.updateCell(colIndex, rowIndex, cell);
            });
        });
    }
@ -640,16 +614,16 @@ export default class CellManager {
        }
    }

-    updateCell(colIndex, rowIndex, value, refreshHtml = false) {
+    updateCell(colIndex, rowIndex, value) {
        const cell = this.datamanager.updateCell(colIndex, rowIndex, {
            content: value
        });
-        this.refreshCell(cell, refreshHtml);
+        this.refreshCell(cell);
    }

-    refreshCell(cell, refreshHtml = false) {
+    refreshCell(cell) {
        const $cell = $(this.selector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
-        $cell.innerHTML = this.getCellContent(cell, refreshHtml);
+        $cell.innerHTML = this.getCellContent(cell);
    }

    toggleTreeButton(rowIndex, flag) {
@ -666,7 +640,7 @@ export default class CellManager {
    }

    focusCellInDirection(direction) {
-        if (!this.$focusedCell || (this.$editingCell && ['left', 'right', 'up', 'down'].includes(direction))) {
+        if (!this.$focusedCell) {
            return false;
        } else if (this.$editingCell && ['tab', 'shift+tab'].includes(direction)) {
            this.deactivateEditing();
@ -773,7 +747,7 @@ export default class CellManager {
    }

    scrollToCell($cell) {
-        if ($.inViewport($cell, this.bodyScrollable) || $.inViewport($cell, this.footer)) return false;
+        if ($.inViewport($cell, this.bodyScrollable)) return false;

        const {
            rowIndex
@ -802,44 +776,10 @@ export default class CellManager {
            isTotalRow
        });

-        let styles = '';
-
        const row = this.datamanager.getRow(rowIndex);

        const isBodyCell = !(isHeader || isFilter || isTotalRow);

-        const serialNoColIndex = !this.options.checkboxColumn && this.options.serialNoColumn ? 0 : 1;
-
-        let sticky = false;
-
-        let checkboxserialNoclass = '';
-
-        if (colIndex === 0 && this.options.checkboxColumn) {
-            if (cell.isHeader && !(cell.id in this.stickyColWitdh)) this.stickyRowWidth = 34;
-            checkboxserialNoclass = 'dt-cell-checkbox';
-            sticky = true;
-        } else if (colIndex === serialNoColIndex && this.options.serialNoColumn) {
-            if (cell.isHeader && !(cell.id in this.stickyColWitdh)) {
-                this.stickyColWitdh[cell.id] = this.stickyRowWidth;
-                this.stickyRowWidth += (cell.width || 37);
-                checkboxserialNoclass = 'dt-cell-serial-no';
-            }
-            styles = `left:${this.stickyColWitdh[isBodyCell ? cell.column.id : cell.id]}px;`;
-            sticky = true;
-
-        } else if (cell.sticky) {
-            if (cell.isHeader && !(cell.id in this.stickyColWitdh)) {
-                this.stickyColWitdh[cell.id] = this.stickyRowWidth;
-                this.stickyRowWidth += ((cell.width || 100) + 1);
-            }
-            styles = `left:${this.stickyColWitdh[cell.id]}px;`;
-            sticky = true;
-
-        } else if ((isBodyCell || isTotalRow) && cell.column.sticky) {
-            styles = `left:${this.stickyColWitdh[cell.column.id]}px;`;
-            sticky = true;
-        }
-
        const className = [
            'dt-cell',
            'dt-cell--col-' + colIndex,
@ -848,19 +788,17 @@ export default class CellManager {
            isHeader ? 'dt-cell--header' : '',
            isHeader ? `dt-cell--header-${colIndex}` : '',
            isFilter ? 'dt-cell--filter' : '',
-            isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : '',
-            sticky ? 'dt-sticky-col' : '',
-            checkboxserialNoclass,
+            isBodyCell && row.meta.isTreeNodeClose ? 'dt-cell--tree-close' : ''
        ].join(' ');

        return `
-            <div class="${className}" ${dataAttr} tabindex="0" style="${styles}">
+            <div class="${className}" ${dataAttr} tabindex="0">
                ${this.getCellContent(cell)}
            </div>
        `;
    }

-    getCellContent(cell, refreshHtml = false) {
+    getCellContent(cell) {
        const {
            isHeader,
            isFilter,
@ -883,18 +821,15 @@ export default class CellManager {
        const hasDropdown = isHeader && cell.dropdown !== false;
        const dropdown = hasDropdown ? this.columnmanager.getDropdownHTML() : '';

-        let customFormatter = CellManager.getCustomCellFormatter(cell);
+        const customFormatter = cell.format || (cell.column && cell.column.format) || null;
+
        let contentHTML;
        if (isHeader || isFilter || !customFormatter) {
            contentHTML = cell.content;
        } else {
-            if (!cell.html || refreshHtml) {
-                const row = this.datamanager.getRow(cell.rowIndex);
-                const data = this.datamanager.getData(cell.rowIndex);
-                contentHTML = customFormatter(cell.content, row, cell.column, data);
-            } else {
-                contentHTML = cell.html;
-            }
+            const row = this.datamanager.getRow(cell.rowIndex);
+            const data = this.datamanager.getData(cell.rowIndex);
+            contentHTML = customFormatter(cell.content, row, cell.column, data);
        }

        cell.html = contentHTML;
@ -926,7 +861,7 @@ export default class CellManager {
            isHeader ? `dt-cell__content--header-${colIndex}` : `dt-cell__content--col-${colIndex}`
        ].join(' ');

-        let cellContentHTML = `
+        return `
            <div class="${className}">
                ${contentHTML}
                ${sortIndicator}
@ -935,16 +870,6 @@ export default class CellManager {
            </div>
            ${editCellHTML}
        `;
-
-        let div = document.createElement('div');
-        div.innerHTML = contentHTML;
-
-        let textContent = div.textContent;
-        textContent = textContent.replace(/\s+/g, ' ').trim();
-
-        cellContentHTML = cellContentHTML.replace('>', ` title="${escapeHTML(textContent)}">`);
-
-        return cellContentHTML;
    }

    getEditCellHTML(colIndex) {
@ -954,8 +879,4 @@ export default class CellManager {
    selector(colIndex, rowIndex) {
        return `.dt-cell--${colIndex}-${rowIndex}`;
    }
-
-    static getCustomCellFormatter(cell) {
-        return cell.format || (cell.column && cell.column.format) || null;
-    }
 }
--- a/src/columnmanager.js
+++ b/src/columnmanager.js
@ -174,11 +174,7 @@ export default class ColumnManager {

        const onMouseMove = (e) => {
            if (!isDragging) return;
-            let delta = e.pageX - startX;
-            if (this.options.direction === 'rtl') {
-                delta = -1 * delta;
-            }
-            const finalWidth = startWidth + delta;
+            const finalWidth = startWidth + (e.pageX - startX);
            const {
                colIndex
            } = $.data($resizingCell);
@ -232,8 +228,6 @@ export default class ColumnManager {
    }

    bindMoveColumn() {
-        if (this.options.disableReorderColumn) return;
-
        const $parent = $('.dt-row', this.header);

        this.sortable = Sortable.create($parent, {
--- a/src/datamanager.js
+++ b/src/datamanager.js
@ -29,8 +29,7 @@ export default class DataManager {
        this.rows = [];

        this.prepareColumns();
-        this.validateData(this.data);
-        this.rows = this.prepareRows(this.data);
+        this.prepareRows();
        this.prepareTreeRows();
        this.prepareRowView();
        this.prepareNumericColumns();
@ -142,8 +141,10 @@ export default class DataManager {
        });
    }

-    prepareRows(data) {
-        return data.map((d, i) => {
+    prepareRows() {
+        this.validateData(this.data);
+
+        this.rows = this.data.map((d, i) => {
            const index = this._getNextRowCount();

            let row = [];
@ -242,9 +243,8 @@ export default class DataManager {

    appendRows(rows) {
        this.validateData(rows);
-        this.rows = this.rows.concat(this.prepareRows(rows));
-        this.prepareTreeRows();
-        this.prepareRowView();
+
+        this.rows.push(...this.prepareRows(rows));
    }

    sortRows(colIndex, sortOrder = 'none') {
@ -280,11 +280,8 @@ export default class DataManager {
        this.rowViewOrder.sort((a, b) => {
            const aIndex = a;
            const bIndex = b;
-
-            let aContent = this.getCell(colIndex, a).content;
-            let bContent = this.getCell(colIndex, b).content;
-            aContent = aContent == null ? '' : aContent;
-            bContent = bContent == null ? '' : bContent;
+            const aContent = this.getCell(colIndex, a).content;
+            const bContent = this.getCell(colIndex, b).content;

            if (sortOrder === 'none') {
                return aIndex - bIndex;
@ -427,7 +424,7 @@ export default class DataManager {
    }

    filterRows(filters) {
-        return this.options.filterRows(this.rows, filters, this)
+        return this.options.filterRows(this.rows, filters)
            .then(result => {
                if (!result) {
                    result = this.getAllRowIndices();
--- a/src/datatable.js
+++ b/src/datatable.js
@ -6,18 +6,7 @@ import RowManager from './rowmanager';
 import BodyRenderer from './body-renderer';
 import Style from './style';
 import Keyboard from './keyboard';
-import TranslationManager from './translationmanager';
-import getDefaultOptions from './defaults';
-
-let defaultComponents = {
-    DataManager,
-    CellManager,
-    ColumnManager,
-    RowManager,
-    BodyRenderer,
-    Style,
-    Keyboard
-};
+import DEFAULT_OPTIONS from './defaults';

 class DataTable {
    constructor(wrapper, options) {
@ -32,11 +21,16 @@ class DataTable {
            throw new Error('Invalid argument given for `wrapper`');
        }

-        this.initializeTranslations(options);
-        this.setDefaultOptions();
        this.buildOptions(options);
        this.prepare();
-        this.initializeComponents();
+
+        this.style = new Style(this);
+        this.keyboard = new Keyboard(this.wrapper);
+        this.datamanager = new DataManager(this.options);
+        this.rowmanager = new RowManager(this);
+        this.columnmanager = new ColumnManager(this);
+        this.cellmanager = new CellManager(this);
+        this.bodyRenderer = new BodyRenderer(this);

        if (this.options.data) {
            this.refresh();
@ -44,36 +38,23 @@ class DataTable {
        }
    }

-    initializeTranslations(options) {
-        this.language = options.language || 'en';
-        this.translationManager = new TranslationManager(this.language);
-
-        if (options.translations) {
-            this.translationManager.addTranslations(options.translations);
-        }
-    }
-
-    setDefaultOptions() {
-        this.DEFAULT_OPTIONS = getDefaultOptions(this);
-    }
-
    buildOptions(options) {
        this.options = this.options || {};

        this.options = Object.assign(
-            {}, this.DEFAULT_OPTIONS,
+            {}, DEFAULT_OPTIONS,
            this.options || {}, options
        );

        options.headerDropdown = options.headerDropdown || [];
        this.options.headerDropdown = [
-            ...this.DEFAULT_OPTIONS.headerDropdown,
+            ...DEFAULT_OPTIONS.headerDropdown,
            ...options.headerDropdown
        ];

        // custom user events
        this.events = Object.assign(
-            {}, this.DEFAULT_OPTIONS.events,
+            {}, DEFAULT_OPTIONS.events,
            this.options.events || {},
            options.events || {}
        );
@ -85,35 +66,12 @@ class DataTable {
        this.unfreeze();
    }

-    initializeComponents() {
-        let components = Object.assign({}, defaultComponents, this.options.overrideComponents);
-        let {
-            Style,
-            Keyboard,
-            DataManager,
-            RowManager,
-            ColumnManager,
-            CellManager,
-            BodyRenderer
-        } = components;
-
-        this.style = new Style(this);
-        this.keyboard = new Keyboard(this.wrapper);
-        this.datamanager = new DataManager(this.options);
-        this.rowmanager = new RowManager(this);
-        this.columnmanager = new ColumnManager(this);
-        this.cellmanager = new CellManager(this);
-        this.bodyRenderer = new BodyRenderer(this);
-    }
-
    prepareDom() {
        this.wrapper.innerHTML = `
            <div class="datatable" dir="${this.options.direction}">
-                <div class="datatable-content">
-                    <div class="dt-header"></div>
-                    <div class="dt-scrollable"></div>
-                    <div class="dt-footer"></div>
-                </div>
+                <div class="dt-header"></div>
+                <div class="dt-scrollable"></div>
+                <div class="dt-footer"></div>
                <div class="dt-freeze">
                    <span class="dt-freeze__message">
                        ${this.options.freezeMessage}
@ -261,10 +219,6 @@ class DataTable {
            console.log.apply(console, arguments);
        }
    }
-
-    translate(str, args) {
-        return this.translationManager.translate(str, args);
-    }
 }

 DataTable.instances = 0;
--- a/src/defaults.js
+++ b/src/defaults.js
@ -1,73 +1,67 @@
 import filterRows from './filterRows';
 import icons from './icons';

-export default function getDefaultOptions(instance) {
-    return {
-        columns: [],
-        data: [],
-        dropdownButton: icons.chevronDown,
-        headerDropdown: [
-            {
-                label: instance.translate('Sort Ascending'),
-                action: function (column) {
-                    this.sortColumn(column.colIndex, 'asc');
-                }
-            },
-            {
-                label: instance.translate('Sort Descending'),
-                action: function (column) {
-                    this.sortColumn(column.colIndex, 'desc');
-                }
-            },
-            {
-                label: instance.translate('Reset sorting'),
-                action: function (column) {
-                    this.sortColumn(column.colIndex, 'none');
-                }
-            },
-            {
-                label: instance.translate('Remove column'),
-                action: function (column) {
-                    this.removeColumn(column.colIndex);
-                }
+export default {
+    columns: [],
+    data: [],
+    dropdownButton: icons.chevronDown,
+    headerDropdown: [
+        {
+            label: 'Sort Ascending',
+            action: function (column) {
+                this.sortColumn(column.colIndex, 'asc');
            }
-        ],
-        events: {
-            onRemoveColumn(column) {},
-            onSwitchColumn(column1, column2) {},
-            onSortColumn(column) {},
-            onCheckRow(row) {},
-            onDestroy() {}
        },
-        hooks: {
-            columnTotal: null
+        {
+            label: 'Sort Descending',
+            action: function (column) {
+                this.sortColumn(column.colIndex, 'desc');
+            }
        },
-        sortIndicator: {
-            asc: '↑',
-            desc: '↓',
-            none: ''
+        {
+            label: 'Reset sorting',
+            action: function (column) {
+                this.sortColumn(column.colIndex, 'none');
+            }
        },
-        overrideComponents: {
-            // ColumnManager: CustomColumnManager
-        },
-        filterRows: filterRows,
-        freezeMessage: '',
-        getEditor: null,
-        serialNoColumn: true,
-        checkboxColumn: false,
-        clusterize: true,
-        logs: false,
-        layout: 'fixed', // fixed, fluid, ratio
-        noDataMessage: instance.translate('No Data'),
-        cellHeight: 40,
-        minimumColumnWidth: 30,
-        inlineFilters: false,
-        treeView: false,
-        checkedRowStatus: true,
-        dynamicRowHeight: false,
-        pasteFromClipboard: false,
-        showTotalRow: false,
-        direction: 'ltr',
-        disableReorderColumn: false
-    };
+        {
+            label: 'Remove column',
+            action: function (column) {
+                this.removeColumn(column.colIndex);
+            }
+        }
+    ],
+    events: {
+        onRemoveColumn(column) {},
+        onSwitchColumn(column1, column2) {},
+        onSortColumn(column) {},
+        onCheckRow(row) {},
+        onDestroy() {}
+    },
+    hooks: {
+        columnTotal: null
+    },
+    sortIndicator: {
+        asc: '↑',
+        desc: '↓',
+        none: ''
+    },
+    filterRows: filterRows,
+    freezeMessage: '',
+    getEditor: null,
+    serialNoColumn: true,
+    checkboxColumn: false,
+    clusterize: true,
+    logs: false,
+    layout: 'fixed', // fixed, fluid, ratio
+    noDataMessage: 'No Data',
+    cellHeight: 40,
+    minimumColumnWidth: 30,
+    inlineFilters: false,
+    treeView: false,
+    checkedRowStatus: true,
+    dynamicRowHeight: false,
+    pasteFromClipboard: false,
+    showTotalRow: false,
+    direction: 'ltr'
 };
--- a/src/filterRows.js
+++ b/src/filterRows.js
@ -1,7 +1,6 @@
 import { isNumber, stripHTML } from './utils';
-import CellManager from './cellmanager';

-export default function filterRows(rows, filters, data) {
+export default function filterRows(rows, filters) {
    let filteredRowIndices = [];

    if (Object.keys(filters).length === 0) {
@ -18,7 +17,7 @@ export default function filterRows(rows, filters, data) {
        const cells = filteredRows.map(row => row[colIndex]);

        let filter = guessFilter(keyword);
-        let filterMethod = getFilterMethod(rows, data, filter);
+        let filterMethod = getFilterMethod(filter);

        if (filterMethod) {
            filteredRowIndices = filterMethod(filter.text, cells);
@ -30,22 +29,9 @@ export default function filterRows(rows, filters, data) {
    return filteredRowIndices;
 };

-function getFilterMethod(rows, allData, filter) {
-    const getFormattedValue = cell => {
-        let formatter = CellManager.getCustomCellFormatter(cell);
-        let rowData = rows[cell.rowIndex];
-        if (allData && allData.data && allData.data.length) {
-            rowData = allData.data[cell.rowIndex];
-        }
-        if (formatter && cell.content) {
-            cell.html = formatter(cell.content, rows[cell.rowIndex], cell.column, rowData, filter);
-            return stripHTML(cell.html);
-        }
-        return cell.content || '';
-    };
-
+function getFilterMethod(filter) {
    const stringCompareValue = cell =>
-        String(stripHTML(cell.html || '') || getFormattedValue(cell)).toLowerCase();
+        String(stripHTML(cell.html || '') || cell.content || '').toLowerCase();

    const numberCompareValue = cell => parseFloat(cell.content);

@ -68,10 +54,9 @@ function getFilterMethod(rows, allData, filter) {
        contains(keyword, cells) {
            return cells
                .filter(cell => {
+                    const hay = stringCompareValue(cell);
                    const needle = (keyword || '').toLowerCase();
-                    return !needle ||
-                        (cell.content || '').toLowerCase().includes(needle) ||
-                        stringCompareValue(cell).includes(needle);
+                    return !needle || hay.includes(needle);
                })
                .map(cell => cell.rowIndex);
        },
@ -194,7 +179,7 @@ function guessFilter(keyword = '') {
        }
    }

-    if (keyword.split(':').length === 2 && keyword.split(':').every(v => isNumber(v.trim()))) {
+    if (keyword.split(':').length === 2) {
        compareString = keyword.split(':');
        return {
            type: 'range',
--- a/src/rowmanager.js
+++ b/src/rowmanager.js
@ -67,7 +67,7 @@ export default class RowManager {
        const _row = this.datamanager.updateRow(row, rowIndex);

        _row.forEach(cell => {
-            this.cellmanager.refreshCell(cell, true);
+            this.cellmanager.refreshCell(cell);
        });
    }

@ -113,13 +113,7 @@ export default class RowManager {

        // update internal map
        if (toggle) {
-            if (this.datamanager._filteredRows) {
-                this.datamanager._filteredRows.forEach(f => {
-                    this.checkRow(f, toggle);
-                });
-            } else {
-                this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value);
-            }
+            this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value);
        } else {
            this.checkMap = [];
        }
@ -139,10 +133,7 @@ export default class RowManager {
        const checkedRows = this.getCheckedRows();
        const count = checkedRows.length;
        if (count > 0) {
-            let message = this.instance.translate('{count} rows selected', {
-                count: count
-            });
-            this.bodyRenderer.showToastMessage(message);
+            this.bodyRenderer.showToastMessage(`${count} row${count > 1 ? 's' : ''} selected`);
        } else {
            this.bodyRenderer.clearToastMessage();
        }
@ -334,8 +325,7 @@ export default class RowManager {
        if (props.isFilter) {
            row = row.map(cell => (Object.assign({}, cell, {
                content: this.getFilterInput({
-                    colIndex: cell.colIndex,
-                    name: cell.name
+                    colIndex: cell.colIndex
                }),
                isFilter: 1,
                isHeader: undefined,
@ -357,10 +347,8 @@ export default class RowManager {
    }

    getFilterInput(props) {
-        let title = `title="Filter based on ${props.name || 'Index'}"`;
        const dataAttr = makeDataAttributeString(props);
-        return `<input class="dt-filter dt-input" type="text" ${dataAttr} tabindex="1"
-            ${props.colIndex === 0 ? 'disabled' : title} />`;
+        return `<input class="dt-filter dt-input" type="text" ${dataAttr} tabindex="1" />`;
    }

    selector(rowIndex) {
--- a/src/style.css
+++ b/src/style.css
@ -27,23 +27,12 @@
 .datatable {
    position: relative;
    overflow: hidden;
-    .dt-cell--col-0{
-        border-left: 1px solid var(--dt-border-color);
-    }
-}
-
-.dt-header{
-    border-bottom: 2px solid var(--dt-border-color);
-}
-
-.datatable-content{
-    .dt-header{
-        display: flex;
-    }
 }

 .dt-scrollable {
    height: 40vw;
+    overflow: auto;
+    border-top: 2px solid var(--dt-border-color);

    &--highlight-all {
        background-color: var(--dt-selection-highlight-color);
@ -80,7 +69,7 @@
 .dt-cell {
    border: 1px solid var(--dt-border-color);
    border-bottom: none;
-    border-left: none;
+    border-right: none;
    position: relative;
    outline: none;
    padding: 0;
@ -175,11 +164,6 @@
    }
 }

-.datatable[dir=rtl] .dt-cell__resize-handle {
-    right: unset;
-    left: -3px;
-}
-
 .icon-open, .icon-close {
    width: 16px;
    height: 16px;
@ -301,8 +285,3 @@
 body.dt-resize {
    cursor: col-resize;
 }
-.dt-sticky-col {
-    position: sticky;
-    z-index: 1;
-    left: 0;
-}
--- a/src/style.js
+++ b/src/style.js
@ -43,51 +43,21 @@ export default class Style {
        this._settingHeaderPosition = false;

        $.on(this.bodyScrollable, 'scroll', (e) => {
-
            if (this._settingHeaderPosition) return;

            this._settingHeaderPosition = true;

            requestAnimationFrame(() => {
+                const { scrollLeft, scrollWidth, clientWidth } = e.target;

-                const scrollLeft = e.target.scrollLeft;
+                let left = this.options.direction === 'rtl' ? scrollWidth - clientWidth - scrollLeft : -scrollLeft;

-                // Move non-sticky header and footer cells normally
-                const nonStickyHeaderCells = this.header.querySelectorAll('.dt-cell:not(.dt-sticky-col)');
-                const nonStickyFooterCells = this.footer.querySelectorAll('.dt-cell:not(.dt-sticky-col)');
-
-                nonStickyHeaderCells.forEach(cell => {
-                    $.style(cell, { transform: `translateX(${-scrollLeft}px)` });
+                $.style(this.header, {
+                    transform: `translateX(${left}px)`
                });
-
-                nonStickyFooterCells.forEach(cell => {
-                    $.style(cell, { transform: `translateX(${-scrollLeft}px)` });
+                $.style(this.footer, {
+                    transform: `translateX(${left}px)`
                });
-
-                const stickyHeaderCells = this.header.querySelectorAll(
-                    '.dt-cell.dt-sticky-col:not(.dt-cell-serial-no):not(.dt-cell-checkbox)'
-                );
-
-                stickyHeaderCells.forEach((headerCell) => {
-
-                    const colIndex = headerCell.getAttribute('data-col-index');
-                    const bodyCell = this.bodyScrollable.querySelector(`.dt-cell[data-col-index="${colIndex}"]`);
-                    const colLeft = parseFloat(headerCell.style.left) || 0; // get left position of the column
-
-                    // Find corresponding footer cell
-                    const footerCell = this.footer.querySelector(`.dt-cell[data-col-index="${colIndex}"]`);
-
-                    if (~~(bodyCell.offsetLeft - scrollLeft) > colLeft) {
-                        headerCell.style.transform = `translateX(${-scrollLeft - 1}px)`;
-                        if (footerCell) {
-                            footerCell.style.transform = `translateX(${scrollLeft ? -scrollLeft - 1 : 0}px)`;
-                        }
-                    } else {
-                        headerCell.style.transform = `translateX(${colLeft - headerCell.offsetLeft}px)`;
-                        if (footerCell) footerCell.style.transform = `translateX(${colLeft - footerCell.offsetLeft}px)`;
-                    }
-                });
-
                this._settingHeaderPosition = false;
            });
        });
@ -173,7 +143,6 @@ export default class Style {
    }

    setDimensions() {
-        this.setCellHeight();
        this.setupMinWidth();
        this.setupNaturalColumnWidth();
        this.setupColumnWidth();
@ -182,12 +151,6 @@ export default class Style {
        this.setBodyStyle();
    }

-    setCellHeight() {
-        this.setStyle('.dt-cell', {
-            height: this.options.cellHeight + 'px'
-        });
-    }
-
    setupMinWidth() {
        $.each('.dt-cell--header', this.header).map(col => {
            const { colIndex } = $.data(col);
@ -224,6 +187,11 @@ export default class Style {

            let naturalWidth = $.style($('.dt-cell__content', $cell), 'width');

+            if (column.id === '_rowIndex') {
+                naturalWidth = this.getRowIndexColumnWidth();
+                column.width = naturalWidth;
+            }
+
            if (typeof naturalWidth === 'number' && naturalWidth >= column.naturalWidth) {
                column.naturalWidth = naturalWidth;
            } else {
@ -272,9 +240,6 @@ export default class Style {
                    if (!column.width) {
                        column.width = column.naturalWidth;
                    }
-                    if (column.id === '_rowIndex') {
-                        column.width = this.getRowIndexColumnWidth();
-                    }
                    if (column.width < this.options.minimumColumnWidth) {
                        column.width = this.options.minimumColumnWidth;
                    }
@ -286,16 +251,8 @@ export default class Style {
        if (this.options.layout !== 'fluid') return;

        const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');
-        let firstRow = $('.dt-row', this.bodyScrollable);
-        let firstRowWidth = wrapperWidth;
-        if (!firstRow) {
-            let headerRow = $('.dt-row', this.instance.header);
-            let cellWidths = Array.from(headerRow.children)
-                .map(cell => cell.offsetWidth);
-            firstRowWidth = cellWidths.reduce((sum, a) => sum + a, 0);
-        } else {
-            firstRowWidth = $.style(firstRow, 'width');
-        }
+        const firstRow = $('.dt-row', this.bodyScrollable);
+        const firstRowWidth = firstRow ? $.style(firstRow, 'width') : wrapperWidth;
        const resizableColumns = this.datamanager.getColumns().filter(col => col.resizable);
        const deltaWidth = (wrapperWidth - firstRowWidth) / resizableColumns.length;

@ -341,10 +298,9 @@ export default class Style {
    setBodyStyle() {
        const bodyWidth = $.style(this.datatableWrapper, 'width');
        const firstRow = $('.dt-row', this.bodyScrollable);
-        if (!firstRow) return;
-        const rowWidth = $.style(firstRow, 'width');
+        const rowWidth = firstRow ? $.style(firstRow, 'width') : bodyWidth;

-        let width = bodyWidth > rowWidth ? rowWidth + 10 : bodyWidth;
+        let width = bodyWidth > rowWidth ? rowWidth : bodyWidth;
        $.style(this.bodyScrollable, {
            width: width + 'px'
        });
--- a/src/translationmanager.js
+++ b/src/translationmanager.js
@ -1,30 +0,0 @@
-import { format } from './utils';
-import getTranslations from './translations';
-
-export default class TranslationManager {
-    constructor(language) {
-        this.language = language;
-        this.translations = getTranslations();
-    }
-
-    addTranslations(translations) {
-        this.translations = Object.assign(this.translations, translations);
-    }
-
-    translate(sourceText, args) {
-        let translation = (this.translations[this.language] &&
-            this.translations[this.language][sourceText]) || sourceText;
-
-        if (typeof translation === 'object') {
-            translation = args && args.count ?
-                this.getPluralizedTranslation(translation, args.count) :
-                sourceText;
-        }
-
-        return format(translation, args || {});
-    }
-
-    getPluralizedTranslation(translations, count) {
-        return translations[count] || translations['default'];
-    }
-};
--- a/src/translations/de.json
+++ b/src/translations/de.json
@ -1,15 +0,0 @@
-{
-	"Sort Ascending": "Aufsteigend sortieren",
-	"Sort Descending": "Absteigend sortieren",
-	"Reset sorting": "Sortierung zurücksetzen",
-	"Remove column": "Spalte entfernen",
-	"No Data": "Keine Daten",
-	"{count} cells copied": {
-		"1": "{count} Zelle kopiert",
-		"default": "{count} Zellen kopiert"
-	},
-	"{count} rows selected": {
-		"1": "{count} Zeile ausgewählt",
-		"default": "{count} Zeilen ausgewählt"
-	}
-}
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -1,15 +0,0 @@
-{
-	"Sort Ascending": "Sort Ascending",
-	"Sort Descending": "Sort Descending",
-	"Reset sorting": "Reset sorting",
-	"Remove column": "Remove column",
-	"No Data": "No Data",
-	"{count} cells copied": {
-		"1": "{count} cell copied",
-		"default": "{count} cells copied"
-	},
-	"{count} rows selected": {
-		"1": "{count} row selected",
-		"default": "{count} rows selected"
-	}
-}
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@ -1,15 +0,0 @@
-{
-	"Sort Ascending": "Trier par ordre croissant",
-	"Sort Descending": "Trier par ordre décroissant",
-	"Reset sorting": "Réinitialiser le tri",
-	"Remove column": "Supprimer colonne",
-	"No Data": "Pas de données",
-	"{count} cells copied": {
-		"1": "{count} cellule copiée",
-		"default": "{count} cellules copiées"
-	},
-	"{count} rows selected": {
-		"1": "{count} ligne sélectionnée",
-		"default": "{count} lignes sélectionnées"
-	}
-}
--- a/src/translations/index.js
+++ b/src/translations/index.js
@ -1,13 +0,0 @@
-import en from './en.json';
-import de from './de.json';
-import fr from './fr.json';
-import it from './it.json';
-
-export default function getTranslations() {
-    return {
-        en,
-        de,
-        fr,
-        it,
-    };
-};
--- a/src/translations/it.json
+++ b/src/translations/it.json
@ -1,15 +0,0 @@
-{
-	"Sort Ascending": "Ordinamento ascendente",
-	"Sort Descending": "Ordinamento decrescente",
-	"Reset sorting": "Azzeramento ordinamento",
-	"Remove column": "Rimuovi colonna",
-	"No Data": "Nessun dato",
-	"{count} cells copied": {
-		"1": "Copiato {count} cella",
-		"default": "{count} celle copiate"
-	},
-	"{count} rows selected": {
-		"1": "{count} linea selezionata",
-		"default": "{count} linee selezionate"
-	}
-}
--- a/src/utils.js
+++ b/src/utils.js
@ -138,30 +138,3 @@ export function numberSortAsc(a, b) {
 export function stripHTML(html) {
    return html.replace(/<[^>]*>/g, '');
 };
-
-export function format(str, args) {
-    if (!str) return str;
-
-    Object.keys(args).forEach(arg => {
-        let regex = new RegExp(`{(${arg})}`, 'g');
-        str = str.replace(regex, args[arg]);
-    });
-
-    return str;
-};
-
-export function escapeHTML(txt) {
-    if (!txt) return '';
-    let escapeHtmlMapping = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#39;',
-        '/': '&#x2F;',
-        '`': '&#x60;',
-        '=': '&#x3D;',
-    };
-
-    return String(txt).replace(/[&<>"'`=/]/g, (char) => escapeHtmlMapping[char] || char);
-};
--- a/yarn.lock
+++ b/yarn.lock