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
13 changed files with 288 additions and 115 deletions
--- 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">
+
+<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, unlike 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/integration/cell.js
+++ b/cypress/integration/cell.js
@ -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/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,10 +17,11 @@
 </head>

 <body>
-	<h1>Frappé DataTable</h1>
+	<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>
@ -150,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++) {
@ -182,7 +247,7 @@
 				var datatable = new DataTable('section', {
 					checkboxColumn: true,
 					serialNoColumn: true,
-					layout: 'fluid',
+					layout: 'fixed', // fluid / fixed
 					columns,
 					data,
 					inlineFilters: true,
@ -278,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/src/body-renderer.js
+++ b/src/body-renderer.js
@ -18,11 +18,15 @@ 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 (this.visibleRowIndices.includes(index)) {
+            if (visibleRowIndicesSet.has(index)) {
                return index;
            }
            return null;
--- a/src/cellmanager.js
+++ b/src/cellmanager.js
@ -20,10 +20,13 @@ export default class CellManager {
            'columnmanager',
            'rowmanager',
            'datamanager',
-            'keyboard'
+            'keyboard',
+            'footer'
        ]);

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

    bindEvents() {
@ -172,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));
@ -552,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);
@ -754,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
@ -783,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,
@ -795,11 +848,13 @@ 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' : ''
+            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>
        `;
--- 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') {
@ -427,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
@ -109,9 +109,11 @@ class DataTable {
    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}
--- a/src/filterRows.js
+++ b/src/filterRows.js
@ -1,7 +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) {
@ -18,7 +18,7 @@ export default function filterRows(rows, filters) {
        const cells = filteredRows.map(row => row[colIndex]);

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

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

-function getFilterMethod(rows, 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, rows[cell.rowIndex], true);
+            cell.html = formatter(cell.content, rows[cell.rowIndex], cell.column, rowData, filter);
            return stripHTML(cell.html);
        }
        return cell.content || '';
@ -64,9 +68,10 @@ function getFilterMethod(rows, 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);
        },
@ -189,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/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;
@ -290,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,19 +43,51 @@ export default class Style {
        this._settingHeaderPosition = false;

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

            this._settingHeaderPosition = true;

            requestAnimationFrame(() => {
-                const left = -e.target.scrollLeft;

-                $.style(this.header, {
-                    transform: `translateX(${left}px)`
+                const scrollLeft = e.target.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.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;
            });
        });
@ -312,7 +344,7 @@ export default class Style {
        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/yarn.lock
+++ b/yarn.lock
@ -3012,7 +3012,7 @@ esutils@^2.0.2:

 event-stream@~3.3.0:
  version "3.3.4"
-  resolved "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
+  resolved "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
  integrity sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=
  dependencies:
    duplexer "~0.1.1"
@ -9057,9 +9057,9 @@ windows-release@^3.1.0:
    execa "^1.0.0"

 word-wrap@^1.0.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
-  integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==

 wordwrap@0.0.2:
  version "0.0.2"
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