datagridxl / datagridxl2

Excel-like Experience for Web Apps (The performant & reliable Vanilla Javascript data grid with Excel-like controls)

Note: this is a repo for (DEPRECATED) DataGridXL version 1.

For DataGridXL 2, visit https://github.com/DataGridXL/DataGridXL2

---

DataGridXL

An official repository for DataGridXL v1: the reliable & performant Vanilla Javascript data grid.

Usage

Include datagridxl.js in your web page HTML file:

<script src="https://code.datagridxl.com/datagridxl.js"></script>

License

Important: To use DataGridXL in live environments, a license is required.

ONLY for non-live environments (internal development purposes), you can use DataGridXL without a license.

Without a license:

• you are required to show the DataGridXL text link ("data grid by DataGridXL") at all times
• you are not entitled to receive any technical support

How to display the logo/link

The text link should have a font-size of at least 14px and the text "DataGridXL" should be clearly a link: underlined and in a color that makes it clear that it is indeed a link.

To get rid of the link, purchase a license.

To purchase a commercial license for the current version of this library, visit DataGridXL Online Store

More info

Visit the DataGridXL website for more information and documentation.

Contact us

• Email: [email protected]
• Web: https://datagridxl.com

datagridxl2's Issues

Selection changes from Single Range to Multi Range after moveRows action

Before moveRows (single range)

After moveRows (multi range)

Codesandbox raises typeerror fullscreen error

According to this Stackoverflow thread, it's because of document.fullscreenEnabled. It seems that in Codesandbox, the iframe document has fullscreenEnabled set to false.

Copying/pasting empty cells incorrect since latest handleCopy/Cut update

Copying 2 cols of empty cells copies only first col. Copying 3 cols of empty cells copies first 2 columns only.
Same goes for copying vertical cells: 2 cells copies first cell, 3 cells copies cells 1 and 2, but not 3.

getData() returns array of wrong data objects

https://codepen.io/datagridxl/pen/VwdXPRN?editors=1010

getData returns an bunch of invalid objects {undefined: 150}. Probably something goes wrong when using columns.

Test Issue 2

Test Issue 2

Fix setcellcursorposition event

setcellcursorposition event does not fire

Add minimum blank sheet space to make space for fill handle

Right now, scroll and document calculations look at row and col dimensions only. However, fill handle renders a few pixels down/right of full document. Add a blanksheetExtraSpace property of some kind to account for the fillhandle.

Include a d.ts definitions file for TypeScript users

Give TypeScript users some love and include a definitions file, to prevent annoying errors and to make including DGXL in TS projects not a pita.

See #38

Add default text-align CSS (left) to columns

If grid is placed in a page/node that has text-align: center, the column nodes are centered as well. it seems there is no style on the dom node to prevent this

.

Column Headers are multiline & overflowing

Error: Could not find a declaration file for module

I am getting this error while importing import DataGridXL from '@datagridxl/datagridxl2';
Is there any way to use this in Angular.

Also, It would be helpful, If anyone has Angular implementation code for latest version.

Thanks

inputBar: inputField is empty on grid ready

It should display the value of the cellCursorPosition cell

CMD+Z puts caret in cellEditor

This might be an OS feature that we need to leave alone, or... we need to fix it. Investigate...

This happens in Safari and in Chrome on MacOS, so quite likely to be a native macOS thing.

getCellValue always returns undefined

Hi @DataGridXL !

I can't get a value from a cell. I'm trying to use getCellValue, but it always returns undefined.
How should I call this function? With two coordiantes arguments? With 1 dict arguemnt? or with array?

Multi-line (\n) should be replaced with ↵ symbol

Cell values that contain newlines should have them be replaced with ↵ symbol, so a cell value is always rendered in a single line!

(Same as DGXL1: DataGridXL/DataGridXL1#1)

iOS Safari leaves fullscreen mode when popup keyboard opens

It's a known issue: https://developer.apple.com/forums/thread/133248

Seems we cannot work around it, as it's a native iOS thing. We might recommend user to display:none the fullscreenButton part on iOS.

Double tapping cell opens cellEditor (on touch)

Strange this here is: if tapping on one cell, then quickly tapping on another cell, dblclick event is recognized (which makes sense). However, eventArea.dblclick handler should check for areCoordsEqual (new tap vs. prev tap). Somehow the openCellEditor method is still called.

Add "disabled" styles for searchBar buttons

Right now, it is not noticable whether buttons are disabled or not.

Chrome caches mouse cursor: displays wrong cursor on init grid

Chrome (on ChromeOS) seems to cache the "cursor" property after it has been changed in "setMouseCursorState". When the user reloads the page (F5), the cursor is not set back to "default", it might still display "grab" when the mouse cursor position hasn't changed since the last grid.

instantActivate false is not working; clicking outside does not deactivate grid

Check datagridxl.com/docs & datagridxl.com/api

Some options/methods/events that are mentioned in docs and api are from v1 and need to be updated to reflect v2 only.

Fix TypeError ctrlKey warning

Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'ctrlKey')
at move (datagridxl2.js:8:96248)     at <anonymous> (datagridxl2.js:8:104181)     at uo (datagridxl2.js:8:77401)

Ticket /198

Bring cellCursor into viewport when inputBar gains focus (on touch)

On touch, focusing the inputBar part resizes the component/window (due to onscreen keyboard showing/hiding). Many times the cell that is edited is moved out of viewport. Bring cell back into view after onscreenkeyboard opens (+closes)

Entering fullscreen mode is slow for grids with large data sets (on touch)

Inspect newline code on Windows (\n\r)

The formatValue private method replaces \n chars with newline symbols. That works on our ChromeOS, but \r is sometimes used. Check on Windows - using crossbrowsertesting

Edge detection speed is not equal in all cases

Edge detection is too fast in grids that have only rows to scroll, compare to grids that scroll in Y and X directions.

Edge detection in a grid that scrolls both directions is nice and steady:
https://datagridxl.com/demos/one-million-cells.

Edge detection in a grid that scrolls only rows is too fast:
https://datagridxl.com/demos/array-of-arrays-2d-array

The "Sorting Columns" demo even does native edge detection when mouse is close to window edges. This native edge detection scrolls the window. Should be disabled in case mouse drag started out of DGXL instance: https://datagridxl.com/demos/sorting-columns

Add catch-all event "change"

It's already on our API page:

Catch-all event for any event that might change the data set: setcellvalues, deletecols/-rows, insertcols/-rows, movecols/-rows.

Copied cells comes with double quotes

Cell value: Hi my “name” is Rogerio
Copy value from cell: “Hi my “”name”” is Rogerio”

These double quotes probably come from PapaParse parse/unparse methods. Check if we need to have these double quotes. Copying Hi my “name” is Rogerio from Google Spreadsheets does not result in double quotes.

Perhaps introduce a new option:

var grid = new DataGridXL("grid", {
  addQuotesToCopiedValues: false
});

/api: Maintain grid selection when commandline editor gains focus

On API page: maintain grid selection when ACE editor (command line) gains focus, so we can do "grid.copy()" etc. Also useful for other applications.

destroy() method should also remove DOM nodes outside main container div

destroy() method should also remove DOM nodes outside main container div

Limit edge detection direction during fillCells drag action

Issue:
Edge detection is always on "xy". However, fillCells action is either "x" or "y" depending on user drag. Match edge detection direction with current fillCells action direction.

Objective:
Match edge detection direction with fillCellsDirection while fillCells mouse drag action.

Uncaught RangeError: Maximum call stack size exceeded

I got Uncaught RangeError: Maximum call stack size exceeded when running:

new DataGridXL("grid", {
                        data: DataGridXL.createDummyData(500000, 1),
                        allowInsertRows: false,
                        allowDeleteRows: false,
                        allowMoveRows: false,
                        allowInsertCols: false,
                        allowDeleteCols: false,
                        allowMoveCols: false,
                        allowFillCells: false,
                        allowEditCells: false,
                        allowCut: false,
                        allowPaste: false,
                        allowResizeCols: true,
                        allowCopy: true
                    });

It seems like you can't achieve 1 million cells with super thin and long columns :(

Does DataGridXL have something that would allow me to split my data and have it loaded whenever the user scrolls down/up far enough to trigger loading the new pagination. And then comes another question: would I need to instantiate a new table or is there some method/function for appending data to the table?

filterRows: when filtering records, double check frozen rows area

Data grid <textarea> receives focus even if instantActivate == false

When creating a new DataGridXL that should not be active instantly, the <textarea> (cell editor) receives focus.

Only have the <textarea> receive focus when DataGridXL is activated.

\n character at end of pasted text should be ignored (MS Excel issue)

From Zendesk Ticket 185:

Copying three cells in a single rows (A B C) copies "A\tB\tC\n" (Windows 10, Excel) instead of "A\t\B\tC" (expected, as seen in Excel Online). This \n character has DataGridXL believe that there are 2 rows copied, instead of just one. It somehow also clears any value in the first cell of this second row.

copy to clipboard with headers

The upper left square in the table can be clicked to highlight all and copy, but it doesn't include the headers. What option should we set to include the headers, not just the data rows? Thanks

Mousemove while drag-selecting downwards slows down scrolling of grid

When mouse-drag selecting downwards (mouse outside of grid), edge detection is activated. Only when mouse stays still the scrolling remains in a solid tempo.

When mouse moves during this drag action, even if mouse movement/coordinates should not affect grid scroll speed (eg. mouse only moves horizontally, which should not affect vertical scroll speed), grid scrolling slows down considerably.

filterRows: add debounce to filter part (input event)

Overflow issue when typing in cellEditor (last column)

cellEditor expands while typing. This can cause overflow issue when cellEditor node becomes so wide that is messes up viewport/component node.

";" is mistakenly recognized as a delimiter on paste (or ",")

Since embedding the parse/unparse methods from papaparse, this is the case. make sure to tell these methods that only TAB \t is a delimiter

Limit ContextMenu position (in window)

Sometimes ContextMenu is opened on page, but it's not entirely visible. Improve positioning code in ContextMenu class.

Incorrect rendering of pasted multiline values

When copying a cell range from G. Sheets, cell values that contain newlines are formatted in quotes ("..."). Do the same for DGXL2 in handleCopy/handleCut handlers (in getCellRangeText method specifically). Also, adjust paste/handlePaste so any quoted values are parsed as a single cell value. (In TSV, a newline is considered a new row of values.)

Activate a single grid if multiple instances on page

Case: https://datagridxl.com/demos/multiple-grids

All four grids have a cell cursor displayed. should not be the case. A cell cursor displayed is a sign of an active grid: only a single grid can be active at a time.

filterRows: when filtering records, scroll back to top

Copying selection of empty cells from Excel Online does not work

Example: copy 2x2 empty cells from Excel Online to DGXL in this Codepen demo: https://codepen.io/datagridxl/pen/mdXxXPR. It doesn't work in DGXL; it works in HoT though.

When pasting the values in the "Check Formatting" textarea, the copied string is "". It seems that HoT reads other data than the copied string. Perhaps the clipboard object holds more detailed Excel info, as they cannot possibly interpret "" as meaning 2x2 empty cells.

handleFullscreenEnter activates grid without cellSelection

Fullscreen button might be pressed when grid is not active. Inside handleFullscreenEnter we activate the grid, which resumes keyboard controls. However, there might be no cell selection. A key like "backspace" results in an error.

Cannot read properties of undefined (reading 'x') at normalizeRange

Test issue

Test issue

HN: Load a CSV of 100,000 records "RangeError"

https://news.ycombinator.com/reply?id=30920492&goto=item%3Fid%3D30919257%2330920492

Been using AgGrid but looking for a replacement. I tried to load a CSV of 100k items here and got a "RangeError: Maximum call stack size exceeded."

https://www.datagridxl.com/demos/import-csv-data

---

See where the error comes from and determine a recommended max number of rows.

Add "change" event listener

The api mentions a change listener, but it's not implemented. The change event should fire on all events that change document data set

Discussion: should we include Papaparse (methods) in codebase (20kb minified)

We're using quite a bit of methods to parse and print tsv and csv. Papaparse is only 20kb minified, and it's heavily tested. They have solved edge cases that we have yet to encounter. Discuss!