doubletrade / lit-datatable Goto Github PK
View Code? Open in Web Editor NEWlit-datatable is a material design implementation of a data table, powered by lit-element.
License: Apache License 2.0
lit-datatable's People
Contributors
Stargazers
Watchers
Forkers
dejan9393 rocat rikacerme jdiaz-stratio lordoftheflies davemooreuws rodriguesgm alisuleymanli yhjhoo numani2c chithiraiselvan dsebatalit-datatable's Issues
Build not working
After adding this lib to my project I'm having those errors when building it.
Adding "skipLibCheck": true to my tsconfig makes it work.
Any idea why I'm having those errors?
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@doubletrade/lit-datatable/localize.d.ts:108:1466 - error TS2536: Type 'K_4' cannot be used to index type 'HTMLElementTagNameMap'.
108 getElementsByTagName<K_4 extends "object" | "dom-module" | "template" | "header" | "paper-input" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "paper-tooltip" | "paper-ripple" | "paper-icon-button" | "paper-icon-item" | "paper-item-body" | "lit-datatable-column" | "iron-meta" | "paper-dropdown-menu" | "paper-listbox" | "paper-item" | "lit-datatable-footer" | "lit-datatable">(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@doubletrade/lit-datatable/localize.d.ts:205:1438 - error TS2536: Type 'K_6' cannot be used to index type 'HTMLElementTagNameMap'.
205 querySelector<K_6 extends "object" | "dom-module" | "template" | "header" | "paper-input" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "paper-tooltip" | "paper-ripple" | "paper-icon-button" | "paper-icon-item" | "paper-item-body" | "lit-datatable-column" | "iron-meta" | "paper-dropdown-menu" | "paper-listbox" | "paper-item" | "lit-datatable-footer" | "lit-datatable">(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@doubletrade/lit-datatable/localize.d.ts:208:1452 - error TS2344: Type 'HTMLElementTagNameMap[K_8]' does not satisfy the constraint 'Node'.
208 querySelectorAll<K_8 extends "object" | "dom-module" | "template" | "header" | "paper-input" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "paper-tooltip" | "paper-ripple" | "paper-icon-button" | "paper-icon-item" | "paper-item-body" | "lit-datatable-column" | "iron-meta" | "paper-dropdown-menu" | "paper-listbox" | "paper-item" | "lit-datatable-footer" | "lit-datatable">(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@doubletrade/lit-datatable/localize.d.ts:208:1452 - error TS2536: Type 'K_8' cannot be used to index type 'HTMLElementTagNameMap'.
208 querySelectorAll<K_8 extends "object" | "dom-module" | "template" | "header" | "paper-input" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "paper-tooltip" | "paper-ripple" | "paper-icon-button" | "paper-icon-item" | "paper-item-body" | "lit-datatable-column" | "iron-meta" | "paper-dropdown-menu" | "paper-listbox" | "paper-item" | "lit-datatable-footer" | "lit-datatable">(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
I clone this repo and also tried to run npm run build, but I also get errors
helpers/ld-header-with-filter.ts:12:14 - error TS4094: Property '_valueHasChanged' of exported class expression may not be private or protected.
12 export class LdHeaderWithFilter extends Localize(LitElement) {
~~~~~~~~~~~~~~~~~~
helpers/ld-header-with-filter.ts:12:14 - error TS4094: Property 'adoptStyles' of exported class expression may not be private or protected.
12 export class LdHeaderWithFilter extends Localize(LitElement) {
~~~~~~~~~~~~~~~~~~
helpers/ld-header-with-filter.ts:12:14 - error TS4094: Property 'createRenderRoot' of exported class expression may not be private or protected.
12 export class LdHeaderWithFilter extends Localize(LitElement) {
~~~~~~~~~~~~~~~~~~
helpers/ld-header-with-filter.ts:12:14 - error TS4094: Property 'enableUpdating' of exported class expression may not be private or protected.
12 export class LdHeaderWithFilter extends Localize(LitElement) {
Td's not always removed when config size changes
Similar to issue #3, TD's don't get cleaned up correctly due to splice re-indexing the this.table[lineNumber].columns array. causing lineNumber to no longer line up to the correct index.
Default sort not functioning in firefox 93
When running the demo and clicking the "sort" arrow, an animation plays but the order of the data rows does not change
Also, it's possible to use the "page" controls to advance the displayed item position beyond the total number of items in the dataset, however I have not observed these controls changing the visible display of items either.
Pinned dependencies causes duplicate modules
This error is thrown when I import lit-datatable-column
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "dom-module" has already been used with this registry
This is because the package depends on a specific (3.2.0) version of polymer but other packages install newer versions and this results in multiple copies of Polymer in node_modules
Demo not displaying as expected.
Please refer to this screenshot for reference. Header display as [object Object] instead of real value.
Please provide screenshots
Hi There
When visiting your github site i would really have loved there to be some screenshots with the code. Otherwise its not easy to understand what is going on and evaluate whether this is something you can use.
Thanks.
Error: No bower.json present
can not run the demo
Error removing tr when data array is altered
Receiving an "Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." when changing the data array, only under certain conditions which I haven't dug deep enough to figure out.
I have managed to make a specific reproduction to showcase the issue by initially having a data array with 10 elements, updating it to an array of 6 elements, then again down to 4 elements:
demo here:
https://infrequent-air.glitch.me/
Sticky Header
I used sticky header for my datatable. But the header always shows on top of the popup.
layouting of iron-icons in choices header
This would be the header-block inside lit-datatable:
<lit-datatable-column
.header="${true}"
property="level"
type="choices"
.choices=${this.levels}
.selectedChoices=${this.selectedLevels}
.handleFilterChoiceChanged="${this._changeLevel}"
></lit-datatable-column>This would be the levels:
this.levels = [
{
key: "0",
label: "debug",
icon: "info-outline",
style: "color:gray",
iconStyle: "color:gray",
selected: false,
},
{
key: "1",
label: "Info",
icon: "info",
style: "color:green",
iconStyle: "color:green",
selected: true,
},
{
key: "2",
label: "warning",
icon: "warning",
style: "color:orange",
iconStyle: "color:orange",
selected: true,
},
{
key: "3",
label: "error",
icon: "error",
style: "color:red",
iconStyle: "color:red",
selected: true,
},
{
key: "4",
label: "fatal",
icon: "bug-report",
style: "color:darkred",
iconStyle: "color:darkred",
selected: true,
},
];update:
With attaching display:inline and width to the styles, it works...
(e.g. in my case for style width:40px and for iconStyle width:25px
Please provide an example of using plain html document and unpkg.com as source
I'm trying this out in a Jupyter Notebook where I can use plain css, html and js and resources from CDNs like unpkg.com because I eventually want to contribute this an example of using a web component with Panel.
It works for me with a lot of other web components like the material mwc components, perspective-viewer, wired widgets etc.
But I cannot get it working for lit-datatable. If possible please provide a working example in a plain .html document.
Thanks.
Screenshot
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<script type="module" src="https://unpkg.com/@doubletrade/[email protected]/lit-datatable.js?module"></script>
</head>
<body>
<lit-datatable
.data="[{ fruit: 'apple', color: 'green', weight: '100gr' },{ fruit: 'banana', color: 'yellow', weight: '140gr' }]"
.conf="[{ property: 'fruit', header: 'Fruit', hidden: false },{ property: 'color', header: 'Color', hidden: true },{ property: 'weight', header: 'Weight', hidden: false }]"
></lit-datatable>
</body>
</html>Feature: editing data
Do we intend to add editing of rows in the future, or will this be for presenting data only?
Is there a roadmap?
Any chance of replacing GPL 3.0 with a more open license? I ask because I believe if I use this component in a commercial application, I might have to publish the source code for the entire application. I would recommend MIT license for this sort of thing...
I don't know how to see the demo
Here's what I did.
git clone https://github.com/DoubleTrade/lit-datatable.git
cd lit-datatable
npm install
added 275 packages from 139 contributors and audited 284 packages in 27.685s
33 packages are looking for funding
run `npm fund` for details
found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
✗ npm run serve
> @doubletrade/[email protected] serve /home/nando/py/theirs/lit-datatable
> polymer serve
sh: polymer: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @doubletrade/[email protected] serve: `polymer serve`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @doubletrade/[email protected] serve script.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.