Merge pull request #207 from iamejaaz/sticky-column-fix

fix: total row and scrolling issue
2025-03-07 17:24:23 +05:30 · 2025-03-07 17:17:50 +05:30 · 2025-02-21 14:49:31 +05:30 · 2025-02-21 14:42:36 +05:30 · 2025-02-20 15:30:29 +05:30 · 2025-02-19 19:13:15 +05:30
32 changed files with 4299 additions and 1716 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.eslintrc
+++ b/.eslintrc
@ -35,7 +35,6 @@
    "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
@ -0,0 +1,24 @@
+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
@ -0,0 +1,16 @@
+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
@ -1,8 +0,0 @@
-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
@ -1,21 +0,0 @@
-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 Frappé Technologies Pvt. Ltd. <developers@frappe.io>
+Copyright (c) 2018 Frappe 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,57 +1,37 @@
-<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>
+<div align="center" markdown="1">

-[![travis build](https://api.travis-ci.com/frappe/datatable.svg?branch=master)](https://travis-ci.org/frappe/datatable)
+<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)
 [![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)


-</div>
-
-## 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, like most data grids out there.
-
-## Demo
-
 ![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)

-## Features
+</div>

-### Cell Features
+## Frappe Datatable

-* Custom Formatters
-* Inline Editing
-* Mouse Selection
-* Copy Cells
-* Keyboard Navigation
-* Custom Cell Editor
+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.

-### Column Features
+### Motivation

-* Reorder Columns
-* Sort by Column
-* Remove / Hide Column
-* Custom Actions
-* Resize Column
-* Flexible Layout
+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.

-### Row Features

-* Row Selection
-* Tree Structured Rows
-* Inline Filters
-* Large Number of Rows
-* Dynamic Row Height
+### Key Features

-## Install
+- **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.
+
+
+## Usage

 ```bash
 yarn add frappe-datatable
@ -61,7 +41,6 @@ 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', {
@ -73,18 +52,24 @@ const datatable = new DataTable('#datatable', {
 });
 ```

-## Contribution
+## Development Setup

 * `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`

-## Read the blog
+## Links

-[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)

-
-## License
-
-[MIT](http://opensource.org/licenses/MIT)
+<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>
--- a/cypress.json
+++ b/cypress.json
@ -1,3 +1,4 @@
 {
-    "baseUrl": "http://localhost:8989"
+    "baseUrl": "http://localhost:8989",
+    "projectId": "2nsyux"
 }
--- 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();
+        cy.getCell(4, 1).dblclick({ force: true });
        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--7-0');
+            .should('have.class', 'dt-cell--11-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')
+        cy.get('.dt-scrollable .dt-row:first div:nth-of-type(3)')
            .contains('Airi Satou');

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

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

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

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

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

-        cy.getColumnCell(3)
-            .should('have.css', 'width')
-            .and('match', /13\dpx/);
-        cy.getCell(3, 1)
-            .should('have.css', 'width')
-            .and('match', /13\dpx/);
+        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);
+        });
    });

    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[data-row-index=0]').should('be.visible');
-        cy.get('.dt-row[data-row-index=1]').should('not.be.visible');
+        cy.get('.dt-row-0').should('be.visible');
+        cy.get('.dt-row-1').should('not.exist');
        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.be.visible');
-        cy.get('.dt-row[data-row-index=22]').should('not.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('@filterInput5').clear();
    });

    it('greater than', function () {
        cy.get('@filterInput5').type('> 6000');
-        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=0]').should('not.exist');
        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.be.visible');
+        cy.get('.dt-row[data-row-index=0]').should('not.exist');
        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.be.visible');
+        cy.get('.dt-row[data-row-index=4]').should('not.exist');
        cy.get('.dt-row[data-row-index=5]').should('be.visible');
        cy.get('@filterInput5').clear();
    });
@ -58,16 +58,15 @@ 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.be.visible');
+        cy.get('.dt-row[data-row-index=1]').should('not.exist');
        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.be.visible');
+        cy.get('.dt-row[data-row-index=0]').should('not.exist');
        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>Frappé DataTable</title>
+	<title>Frappe DataTable</title>
 	<style>
 		body {
 			font-family: 'Tahoma';
@ -17,9 +17,11 @@
 </head>

 <body>
-	<h1>Frappé DataTable</h1>
-	<button onclick="datatable.render()">Refresh</button>
+	<h1>Frappe DataTable</h1>
+	<button onclick="datatable.render()">Render Table</button>
+	<button onclick="datatable.refresh()">Refresh Data</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>
@ -149,21 +151,85 @@

 			function buildData() {
 				columns = [
-					{ name: "Name" },
-					{ name: "Position" },
-					{ name: "Office" },
+					{ name: "Name", width: 150, sticky: true },
+					{ name: "Position", width: 200 },
+					{ name: "Office", sticky: true },
 					{ 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: "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"}
+
 				];
-				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]];
+				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]
+				]

 				if (largeData) {
 					for (let i = 0; i < 10; i++) {
@ -181,13 +247,25 @@
 				var datatable = new DataTable('section', {
 					checkboxColumn: true,
 					serialNoColumn: true,
-					layout: 'fluid',
+					layout: 'fixed', // fluid / fixed
 					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))
@ -265,6 +343,15 @@
 				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,6 +17,7 @@
    "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": [
@ -26,7 +27,7 @@
  "devDependencies": {
    "autoprefixer": "^9.0.0",
    "chai": "3.5.0",
-    "cypress": "3.0.1",
+    "cypress": "^9.2.0",
    "cz-conventional-changelog": "^2.1.0",
    "deepmerge": "^2.0.1",
    "eslint": "^5.0.1",
@ -44,7 +45,7 @@
    "rollup-plugin-node-resolve": "^3.0.3",
    "rollup-plugin-postcss": "^1.2.8",
    "rollup-plugin-uglify-es": "^0.0.1",
-    "semantic-release": "^15.6.3",
+    "semantic-release": "^17.1.1",
    "start-server-and-test": "^1.4.1",
    "travis-deploy-once": "^5.0.1"
  },
@ -63,7 +64,7 @@
  "bugs": {
    "url": "https://github.com/frappe/datatable/issues"
  },
-  "homepage": "https://frappe.github.io/datatable",
+  "homepage": "https://frappe.io/datatable",
  "dependencies": {
    "hyperlist": "^1.0.0-beta",
    "lodash": "^4.17.5",
@ -74,4 +75,4 @@
      "path": "cz-conventional-changelog"
    }
  }
-}
+}
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@ -16,8 +16,17 @@ export default class BodyRenderer {
        this.visibleRows = rows;
        this.visibleRowIndices = rows.map(row => row.meta.rowIndex);

+        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 (this.visibleRowIndices.includes(index)) {
+            if (visibleRowIndicesSet.has(index)) {
                return index;
            }
            return null;
--- a/src/cellmanager.js
+++ b/src/cellmanager.js
@ -2,7 +2,8 @@ import {
    copyTextToClipboard,
    makeDataAttributeString,
    throttle,
-    linkProperties
+    linkProperties,
+    escapeHTML,
 } from './utils';
 import $ from './dom';
 import icons from './icons';
@ -19,10 +20,13 @@ export default class CellManager {
            'columnmanager',
            'rowmanager',
            'datamanager',
-            'keyboard'
+            'keyboard',
+            'footer'
        ]);

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

    bindEvents() {
@ -133,7 +137,10 @@ export default class CellManager {
    bindCopyCellContents() {
        this.keyboard.on('ctrl+c', () => {
            const noOfCellsCopied = this.copyCellContents(this.$focusedCell, this.$selectionCursor);
-            const message = `${noOfCellsCopied} cell${noOfCellsCopied > 1 ? 's' : ''} copied`;
+            const message = this.instance.translate('{count} cells copied', {
+                count: noOfCellsCopied
+            });
+
            if (noOfCellsCopied) {
                this.instance.showToastMessage(message, 2);
            }
@ -168,6 +175,14 @@ 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));
@ -517,11 +532,14 @@ 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);
+                    this.updateCell(colIndex, rowIndex, value, true);
                    $cell.focus();

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

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

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

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

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

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

        const {
            rowIndex
@ -776,10 +802,44 @@ 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,
@ -788,17 +848,19 @@ export default class CellManager {
            isHeader ? 'dt-cell--header' : '',
            isHeader ? `dt-cell--header-${colIndex}` : '',
            isFilter ? 'dt-cell--filter' : '',
-            isBodyCell && row.meta.isTreeNodeClose ? 'dt-cell--tree-close' : ''
+            isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : '',
+            sticky ? 'dt-sticky-col' : '',
+            checkboxserialNoclass,
        ].join(' ');

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

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

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

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

-        return `
+        let cellContentHTML = `
            <div class="${className}">
                ${contentHTML}
                ${sortIndicator}
@ -870,6 +935,16 @@ 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) {
@ -879,4 +954,8 @@ 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,7 +174,11 @@ export default class ColumnManager {

        const onMouseMove = (e) => {
            if (!isDragging) return;
-            const finalWidth = startWidth + (e.pageX - startX);
+            let delta = e.pageX - startX;
+            if (this.options.direction === 'rtl') {
+                delta = -1 * delta;
+            }
+            const finalWidth = startWidth + delta;
            const {
                colIndex
            } = $.data($resizingCell);
@ -228,6 +232,8 @@ 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,7 +29,8 @@ export default class DataManager {
        this.rows = [];

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

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

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

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

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

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

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

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

+        this.initializeTranslations(options);
+        this.setDefaultOptions();
        this.buildOptions(options);
        this.prepare();
-
-        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);
+        this.initializeComponents();

        if (this.options.data) {
            this.refresh();
@ -38,23 +44,36 @@ 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(
-            {}, DEFAULT_OPTIONS,
+            {}, this.DEFAULT_OPTIONS,
            this.options || {}, options
        );

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

        // custom user events
        this.events = Object.assign(
-            {}, DEFAULT_OPTIONS.events,
+            {}, this.DEFAULT_OPTIONS.events,
            this.options.events || {},
            options.events || {}
        );
@ -66,12 +85,35 @@ 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="dt-header"></div>
-                <div class="dt-scrollable"></div>
-                <div class="dt-footer"></div>
+                <div class="datatable-content">
+                    <div class="dt-header"></div>
+                    <div class="dt-scrollable"></div>
+                    <div class="dt-footer"></div>
+                </div>
                <div class="dt-freeze">
                    <span class="dt-freeze__message">
                        ${this.options.freezeMessage}
@ -219,6 +261,10 @@ 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,67 +1,73 @@
 import filterRows from './filterRows';
 import icons from './icons';

-export default {
-    columns: [],
-    data: [],
-    dropdownButton: icons.chevronDown,
-    headerDropdown: [
-        {
-            label: 'Sort Ascending',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'asc');
+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);
+                }
            }
+        ],
+        events: {
+            onRemoveColumn(column) {},
+            onSwitchColumn(column1, column2) {},
+            onSortColumn(column) {},
+            onCheckRow(row) {},
+            onDestroy() {}
        },
-        {
-            label: 'Sort Descending',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'desc');
-            }
+        hooks: {
+            columnTotal: null
        },
-        {
-            label: 'Reset sorting',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'none');
-            }
+        sortIndicator: {
+            asc: '↑',
+            desc: '↓',
+            none: ''
        },
-        {
-            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'
+        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
+    };
 };
--- a/src/filterRows.js
+++ b/src/filterRows.js
@ -1,6 +1,7 @@
 import { isNumber, stripHTML } from './utils';
+import CellManager from './cellmanager';

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

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

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

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

-function getFilterMethod(filter) {
+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 || '';
+    };
+
    const stringCompareValue = cell =>
-        String(stripHTML(cell.html || '') || cell.content || '').toLowerCase();
+        String(stripHTML(cell.html || '') || getFormattedValue(cell)).toLowerCase();

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

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

-    if (keyword.split(':').length === 2) {
+    if (keyword.split(':').length === 2 && keyword.split(':').every(v => isNumber(v.trim()))) {
        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);
+            this.cellmanager.refreshCell(cell, true);
        });
    }

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

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

    selector(rowIndex) {
--- a/src/style.css
+++ b/src/style.css
@ -27,12 +27,23 @@
 .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);
@ -69,7 +80,7 @@
 .dt-cell {
    border: 1px solid var(--dt-border-color);
    border-bottom: none;
-    border-right: none;
+    border-left: none;
    position: relative;
    outline: none;
    padding: 0;
@ -164,6 +175,11 @@
    }
 }

+.datatable[dir=rtl] .dt-cell__resize-handle {
+    right: unset;
+    left: -3px;
+}
+
 .icon-open, .icon-close {
    width: 16px;
    height: 16px;
@ -285,3 +301,8 @@
 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,21 +43,51 @@ 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;

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

-                $.style(this.header, {
-                    transform: `translateX(${left}px)`
+                // 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.footer, {
-                    transform: `translateX(${left}px)`
+
+                nonStickyFooterCells.forEach(cell => {
+                    $.style(cell, { transform: `translateX(${-scrollLeft}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;
            });
        });
@ -143,6 +173,7 @@ export default class Style {
    }

    setDimensions() {
+        this.setCellHeight();
        this.setupMinWidth();
        this.setupNaturalColumnWidth();
        this.setupColumnWidth();
@ -151,6 +182,12 @@ 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);
@ -187,11 +224,6 @@ 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 {
@ -240,6 +272,9 @@ 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;
                    }
@ -251,7 +286,16 @@ export default class Style {
        if (this.options.layout !== 'fluid') return;

        const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');
-        const firstRowWidth = $.style($('.dt-row', this.bodyScrollable), '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 resizableColumns = this.datamanager.getColumns().filter(col => col.resizable);
        const deltaWidth = (wrapperWidth - firstRowWidth) / resizableColumns.length;

@ -297,9 +341,10 @@ 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');

-        let width = bodyWidth > rowWidth ? rowWidth : bodyWidth;
+        let width = bodyWidth > rowWidth ? rowWidth + 10 : bodyWidth;
        $.style(this.bodyScrollable, {
            width: width + 'px'
        });
--- a/src/translationmanager.js
+++ b/src/translationmanager.js
@ -0,0 +1,30 @@
+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
@ -0,0 +1,15 @@
+{
+	"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
@ -0,0 +1,15 @@
+{
+	"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
@ -0,0 +1,15 @@
+{
+	"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
@ -0,0 +1,13 @@
+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
@ -0,0 +1,15 @@
+{
+	"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,3 +138,30 @@ 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
Author	SHA1	Message	Date
Ejaaz Khan	487908974f	Merge pull request #207 from iamejaaz/sticky-column-fix fix: total row and scrolling issue	2025-03-07 17:24:23 +05:30
Ejaaz Khan	bf65f4bc9f	fix: total row and scrolling issue	2025-03-07 17:17:50 +05:30
Ejaaz Khan	82582a0b20	Merge pull request #205 from iamejaaz/sticky-column feat: add support for sticky columns	2025-02-21 14:49:31 +05:30
Ejaaz Khan	007a7bf92a	refactor: add flex to header to avoid overlow issue	2025-02-21 14:42:36 +05:30
Ejaaz Khan	a5cc12f7ec	fix: alignment issue without checkbox column	2025-02-20 15:30:29 +05:30
Ejaaz Khan	4758cf2cd4	test: add dynamic width in resize column	2025-02-19 19:13:15 +05:30
Ejaaz Khan	584d964a72	test: fix resize column test	2025-02-19 17:48:34 +05:30
Ejaaz Khan	6d381d8f6b	test: fix failing tests	2025-02-19 17:40:17 +05:30
Ejaaz Khan	f1c2cd916c	feat: add support for sticky columns	2025-02-19 16:04:59 +05:30
Soham Kulkarni	f05049c67a	fix: add abiltiy to copy total row (#204 )	2025-02-06 19:45:03 +05:30
Smit Vora	ba9814228d	fix: reset the footer to ensure old totals are cleared (#202 )	2025-02-06 14:43:14 +05:30
Faris Ansari	4b124f0b1d	chore: simplify usage section	2024-12-12 20:36:13 +05:30
Faris Ansari	9193fd9b06	Update README.md (#201 )	2024-12-12 16:14:54 +05:30
Ankush Menat	ecc660ed68	fix: inline filter with html chars (#198 ) Filtering with `&` doesn't work because it gets escaped in HTML.	2024-04-17 19:02:02 +05:30
Ankush Menat	bed2708bd5	perf: rendering large data (#197 ) visibleRowIndices.includes is major culprit in rendering data table. This is because for every row it does this computation, so instead of O(N) operation it becomes O(N^2)	2024-03-13 17:40:57 +05:30
Shariq Ansari	dbde62ce40	Merge pull request #194 from RitvikSardana/develop-ritvik-rowWidth-fix fix: row width fix to remove unnecessary scroll bar	2024-01-08 15:14:16 +05:30
RitvikSardana	fb465579a0	fix: row width fix to remove unnecessary scroll bar	2024-01-08 15:04:58 +05:30
Shariq Ansari	cca14e09eb	Merge pull request #192 from shariquerik/minor-fix-4 fix: store all data and data in separately	2024-01-03 14:55:10 +05:30
Shariq Ansari	dc09e1d1b2	fix: store all data and data in separately	2024-01-03 14:53:36 +05:30
Shariq Ansari	007ec69609	Merge pull request #191 from shariquerik/minor-fix-3 fix: minor fix	2024-01-03 14:29:05 +05:30
Shariq Ansari	e209ec2ed0	fix: minor fix	2024-01-03 14:27:19 +05:30
Shariq Ansari	89926b680c	Merge pull request #190 from shariquerik/minor-fix-2 fix: minor fix	2024-01-03 14:21:58 +05:30
Shariq Ansari	bbb4eb1f7e	Merge branch 'master' into minor-fix-2	2024-01-03 14:21:49 +05:30
Shariq Ansari	b0e6261285	fix: minor fix	2024-01-03 14:20:01 +05:30
Shariq Ansari	89d3149695	Merge pull request #189 from shariquerik/chore-1 chore: condition fix	2024-01-03 14:13:23 +05:30
Shariq Ansari	497d420ef6	chore: condition fix	2024-01-03 14:12:27 +05:30
Shariq Ansari	f46e7142b7	Merge pull request #188 from shariquerik/load-data fix: load cell data from data list	2024-01-03 14:06:30 +05:30
Shariq Ansari	04a0202fc3	fix: load cell data from data list	2024-01-03 14:05:49 +05:30
Saqib Ansari	dfbd98a502	chore: fix linter	2024-01-02 12:24:06 +05:30
Saqib Ansari	ae07ce3712	Merge pull request #187 from frappe/nextchamp-saqib-patch-1 fix: `data` is undefined	2024-01-02 12:20:52 +05:30
Saqib Ansari	b3ff486934	fix: `data` is undefined	2024-01-02 12:17:50 +05:30
Shariq Ansari	98835d8d59	chore: linter fix	2023-12-21 14:16:28 +05:30
Shariq Ansari	1979641623	Merge pull request #186 from shariquerik/send-data-to-formatter2 fix: getdata from datamanager if data is datamanager object	2023-12-21 14:08:38 +05:30
Shariq Ansari	b8a1af27d2	fix: getdata from datamanager if data is datamanager object	2023-12-21 14:08:12 +05:30
Shariq Ansari	f0044603a1	Merge pull request #185 from shariquerik/send-data-to-formatter1 fix: send data of that cell to formatter	2023-12-21 13:39:16 +05:30
Shariq Ansari	49cc051392	fix: send data of that cell to formatter	2023-12-21 13:38:31 +05:30
Shariq Ansari	d29615bca9	Merge pull request #184 from shariquerik/send-data-to-formatter fix: send data to formatter	2023-12-21 13:28:43 +05:30
Shariq Ansari	48d5b97e55	fix: send data to formatter	2023-12-21 13:27:43 +05:30
Shariq Ansari	8f074a80c2	Merge pull request #183 from shariquerik/filter-row-pass-data fix: pass data as second parameter to filterMethod	2023-12-21 13:20:14 +05:30
Shariq Ansari	2c36123663	fix: pass data as second parameter to filterMethod	2023-12-21 13:19:34 +05:30
Shariq Ansari	50b44bfb09	fix: added dataManager in filterRows function	2023-12-21 13:13:41 +05:30
Shariq Ansari	6d29880fb7	Merge pull request #182 from shariquerik/pass-filter-instead-of-true fix: pass filter instead of true	2023-12-07 19:18:37 +05:30
Shariq Ansari	739182562a	fix: pass filter instead of true	2023-12-07 19:14:10 +05:30
Faris Ansari	b21e547794	fix: appendRows bug (#181 ) Co-authored-by: ArunMuthuram <65416680+ArunMuthuram@users.noreply.github.com>	2023-11-21 13:24:35 +05:30
Suraj Shetty	7ee8ca9304	fix: 🐛 Apply range filter only for numbers (#176 )	2023-09-11 13:05:09 +05:30
Matheo D	17cddc05f1	chore: remove .DS_STORE file (#165 )	2023-06-17 21:21:19 +05:30
Shariq Ansari	ddb2dd3986	Merge pull request #169 from frappe/filter-with-content-value	2023-03-03 11:43:15 +05:30
Shariq Ansari	71272f8f9e	fix: get content value for specific fieldtypes	2023-03-03 11:33:03 +05:30
Shariq Ansari	6c79a19b29	fix: escape html to get tooltip text (#167 )	2023-01-25 18:37:24 +05:30
Shariq Ansari	f990c1ff87	Merge pull request #161 from JulioJair/feature/rowmanager/check-all-filtered	2023-01-25 17:13:03 +05:30
Shariq Ansari	4f07f5fe4e	Merge pull request #166 from shariquerik/dt-cell-tooltip	2023-01-25 17:09:42 +05:30
Shariq Ansari	0b1ce23a33	fix: show datatable cell content in tooltip on hover	2023-01-25 16:53:34 +05:30
Julio de Alba	aa3f3be67f	feat: 🎸 check all filtered rows When datatable has filters applied, and the "check all" is used, it will check only the rows that match the filters.	2022-09-22 07:07:20 -05:00
Shariq Ansari	eda1540f3b	Merge pull request #158 from phot0n/fix-filter-custom-formatter	2022-06-10 14:28:22 +05:30
phot0n	430d7cfe48	fix: use custom formatter when filtering rows As datatable renders only some rows at a time and sets each cell's html property based on that rendering, so when someone filters things and only looks at some rows without scrolling the whole grid and tries to filter things (when there is a custom cell formatter), they won't be able to see the data as the filtering is done based on cell's content not html (as it's not set at that point)	2022-06-10 11:51:11 +05:30
Shariq Ansari	b4428639cb	Merge pull request #157 from shariquerik/keyboard-integration-fix	2022-06-08 19:57:17 +05:30
Shariq Ansari	d6a6c16fdf	chore: minor fix	2022-06-08 19:51:19 +05:30
Shariq Ansari	42a236d9c8	fix: use left, right, up, down keys while editing cell value	2022-06-08 19:11:57 +05:30
Shariq Ansari	d2c4e21cca	fix: Dont save if value is same	2022-06-08 19:10:41 +05:30
Shariq Ansari	fea45f4a31	Merge pull request #156 from frappe/fix-link	2022-06-03 15:36:10 +05:30
Hussain Nagaria	59e7f6635a	fix: Homepage Link	2022-06-03 15:07:57 +05:30
Shariq Ansari	a278075247	Merge pull request #143 from shariquerik/add-tooltip-on-filter	2022-01-29 11:27:32 +05:30
Shariq Ansari	5db24187e6	Merge branch 'master' into add-tooltip-on-filter	2022-01-27 12:51:06 +05:30
Faris Ansari	95a239963c	fix: column resizing in rtl direction	2022-01-17 16:38:49 +05:30
Faris Ansari	4549a5176b	chore: update cypress, github actions and fix tests (#148 )	2022-01-05 17:57:02 +05:30
Faris Ansari	6fcce176c3	chore: remove rule for comma-dangle	2022-01-04 15:03:36 +05:30
Faris Ansari	00d924c5c0	chore: update ubuntu version	2022-01-04 12:57:29 +05:30
Himanshu	6d6602f202	feat: translations (#145 ) Co-authored-by: Raffael Meyer <14891507+barredterra@users.noreply.github.com> Co-authored-by: Faris Ansari <netchamp.faris@gmail.com>	2022-01-03 18:41:52 +05:30
Shariq Ansari	88a361f053	fix: Adding tooltip on filter inputs	2021-09-28 13:43:59 +05:30
Shariq Ansari	8ceadaccba	fix: update rowIndex width when row count changes (#138 ) * fix: update rowIndex width when row count changes * fix: removed unwanted code * fix: Added Refresh Data button	2021-08-20 17:07:35 +05:30
Faris Ansari	cb2729424b	chore: Add github action badge	2020-09-16 23:14:49 +05:30
Faris Ansari	0042e3172b	chore: Add github token env	2020-09-16 23:06:57 +05:30
Faris Ansari	16983cfbf0	chore: Github Actions configuration (#113 )	2020-09-16 22:59:51 +05:30
Prssanna Desai	279a876f7d	fix: 🐛 scroll for rtl direction (#111 )	2020-09-16 11:45:20 +05:30
Christopher G. Purbaugh	a0901768d7	Minor grammatical change (#45 )	2020-04-01 11:11:54 +05:30
mergify[bot]	c263ab410e	Merge pull request #98 from prssanna/sort-fix fix: 🐛 set content of empty cell to empty string for sorting	2020-03-16 09:35:23 +00:00
prssanna	18964c0346	fix: 🐛 set content of empty cell to empty string for sorting	2020-02-29 15:56:36 +05:30
Faris Ansari	3475f6ccaa	fix: Set cell height explicitly	2019-12-09 22:35:53 +05:30
Faris Ansari	31264d1f4d	feat: Ability to disable column reordering	2019-10-01 00:12:17 +05:30
Faris Ansari	1a9c11edf0	fix: Render fluid layout if first row doesnt exist	2019-09-28 14:00:18 +05:30
Faris Ansari	1be233d054	chore: Install libgconf for travis run	2019-09-27 02:45:33 +05:30
Faris Ansari	d92fc5e969	feat: Allow overriding individual components	2019-09-17 19:00:11 +05:30
Faris Ansari	ad0e0b592a	fix: Render blank state when rows is 0	2019-09-17 18:59:14 +05:30