BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
BranchesTags

Repository files navigation

React Data Grid

Build statusCoverage Statusnpm versionnpm dependenciesReact Data Grid chat

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/
react-data-grid

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons. What's included in each module depends on ReactDataGrid's version you're using. We have made a major change to this in v1, so please read below.

0.X.X

  • You can import react-data-gridorreact-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid so in 0.X.X you only need to imort this module to get the addon extras and the grid itself.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Known Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, so you cannot use this on a page with IE* as babel generated script will break (using default and other issues that break in IE8)
    • This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat

1.0.0

We have made a breaking change, so react-data-grid/addons will not include the grid itself, it is only for importing the addons and you need to also import react-data-grid This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. This will allow you to simply include react-data-grid/addons to get everything, but also to include single addons (a la lodash)

  • If you just want the basic grid import react-data-grid
  • If you want the addons (ruich editors, etc) import react-data-gridandreact-data-grid/addons
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Migration from 0.X to 1.X

If you previously had an import for react-data-grid/addons you will need to now add react-data-grid as well

Features

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

About

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages