Excel-like Experience for Web Apps

Overview

DataGridXL 2

Excel-like Experience for Web Apps

Built in JavaScript ES6. Made in the 2020s.

DataGridXL Screenshot

  • Works with JSON
  • Works with CSV
  • Works with SQL
  • Works with React
  • Works with Vue
  • Works with Angular

The performant data grid

DataGridXL is the new grid on the block™! Written in Javascript ES6, made in the 2020s and built with performance & usability in mind.

Why DataGridXL?

1. Just like Excel & Google Sheets

Keyboard, mouse and touchscreen controls are familiar to your users.

2. Lightweight & Super Fast

No dependencies. Display thousands of rows & columns. No hiccups!

3. Programmer Friendly

Dozens of demos, extensive docs, even an interactive API playground.

4. Built in the 2020s

Backed by a store & state model, just like React. Modern and reliable.

5. Top Notch Support

Support is fast and includes live code examples.

6. Framework Compatible

React, Angular, Vue and the next big thing: DataGridXL is compatible.

See it in action:

See how DataGridXL powers live Web Apps & Get Inspired!

1. tableconvert.com

Convert table data from any format to any format. E.g. JSON to Markdown or CSV to XML.

2. editcsvonline.com

Edit CSV files online just like Google Sheets. No need to sign up!

Usage

Include datagridxl.js in your web page HTML file:

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

Then, run this code inside your HTML/JS:

<div id="grid" style="height:400px;"></div>
<script>
var grid = new DataGridXL("grid");
</script>

License

This DataGridXL software is free under a linkware license.

This means you may not remove or hide in any other way link to DataGridXL web site - https://datagridxl.com.

If you wish to remove the link, you should purchase commercial license.

You may not redistribute, sublicense or sell this program without written permission of Vanilla Components, the creator of DataGridXL software.

This software is provided without warranty.

Commercial 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

Comments
  • copy to clipboard with headers

    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

    opened by achillis2 1
  • Error: Could not find a declaration file for module

    Error: Could not find a declaration file for module

    Screenshot from 2022-09-23 11-23-03

    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

    opened by ayush1852017 1
  • Fix TypeError ctrlKey warning

    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

    opened by DataGridXL 1
  • Copied cells comes with double quotes

    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
    });
    
    opened by DataGridXL 1
  • \n character at end of pasted text should be ignored (MS Excel issue)

    \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.

    bug 
    opened by DataGridXL 1
  • Copying/pasting empty cells incorrect since latest handleCopy/Cut update

    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.

    opened by DataGridXL 1
  • Add default text-align CSS (left) to columns

    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 Screenshot 2022-02-16 17 01 15 .

    bug 
    opened by DataGridXL 1
  • Discussion: should we include Papaparse (methods) in codebase (20kb minified)

    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!

    discussion 
    opened by DataGridXL 1
  • Incorrect rendering of pasted multiline values

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

    bug 
    opened by DataGridXL 1
  • Multi-line (\n) should be replaced with ↵ symbol

    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: https://github.com/DataGridXL/DataGridXL/issues/1)

    bug 
    opened by DataGridXL 1
  • CMD+Z puts caret in cellEditor

    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.

    macOS 
    opened by DataGridXL 1
  • Include a d.ts definitions file for TypeScript users

    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

    opened by DataGridXL 0
  • getData() returns array of wrong data objects

    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.

    opened by DataGridXL 0
  • Copying selection of empty cells from Excel Online does not work

    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.

    bug 
    opened by DataGridXL 2
  • HN: Load a CSV of 100,000 records

    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.

    opened by DataGridXL 0
  • Codesandbox raises typeerror fullscreen error

    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.

    image

    opened by DataGridXL 0
Owner
DataGridXL
Excel-like Experience for Web Apps
DataGridXL
Mind Mapping to excel, or excel to .xmind file

Mind Mapping To Excel Project setup Prepare project npm install 1、Fetch data and generate excel Open the Mind Mapping like this Process On Mind Mappi

xuzelin995 3 May 5, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

FortuneSheet FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel English | 简体中文 Purpose The

Suzhou Ruilisi Technology Co., Ltd 1.6k Jan 3, 2023
An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

Obsidian Excel to Markdown Table An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor. Demo You can paste the copied Excel d

Ganessh Kumar 108 Jan 4, 2023
Suplemento para Excel para auxiliar na elaboração de cálculos judiciais.

Getting Started with Create React App and Fluent UI This is a Create React App based repo that comes with Fluent UI pre-installed! Available Scripts I

null 4 Jul 6, 2022
Import flow for Excel (.xlsx) and CSV file with automated column matching and validation.

RSI react-spreadsheet-import ⚡️ A component used for importing XLS / XLSX / CSV documents built with Chakra UI. Import flow combines: ?? Uploader ⚙️ P

Ugnis 123 Dec 24, 2022
🌸 A cli can automatically generate files from Excel files.

unxlsx A cli can automatically generate files from Excel files. Why We often need to export some information from XLSX to generate our files, such as

Frozen FIsh 24 Aug 22, 2022
Export your HTML table to Excel format.

excelExport Export your HTML tables to Excel format. Doc Installation Simply import JQuery & excel-export into your HTML. <script src="https://code.jq

Zenoo 1 Apr 22, 2021
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Fabio Spampinato 9 Sep 17, 2022
Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Cleo Menezes Jr. 43 Nov 7, 2022
Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Microsoft 11 Dec 14, 2022
why make apps to increase focus -- when you can make apps to reduce focus

impossifocus ?? What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Aleem Rehmtulla 10 Nov 30, 2022
This project provides a React-powered web experience using the PokeAPI. It also is a creative space to hone frontend skills.

pokedex-nova This project provides a React-powered web experience using the PokeAPI. It also is a creative space to hone frontend skills. Available Sc

Anthony Williams 2 Feb 1, 2022
An extension for rating the web and making your browsing experience better than ever.

Hookmark An extension for rating the web and making your browsing experience better than ever. Read more about it here Update Firefox extension was un

Haridarshan Choudhary 9 Sep 17, 2022
HackMIT 2022. 2nd Place in Blockchain for Society sponsored by Jump Crypto. A revolutionary web application that leverages machine learning and blockchain technology to improve the crowdsourcing experience!

?? Wikisafe ?? Wikisafe is a revolutionary new crowdsourcing web application that innovates the process of crowdsourcing information. This application

Benson Liu 5 Dec 8, 2022
Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Ben Coleman 55 Dec 31, 2022
A Browser extension that not only makes your browsing experience safe but makes it optimized

Sia Sia is a browser extension that not only makes your browsing experience safe but makes it optimized Table of Contents About The Project Built With

Arun Govind M 14 Feb 23, 2022