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 is a material design implementation of a data table, powered by lit-element.
License: Apache License 2.0
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) {
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.
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.
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
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.
can not run the demo
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/
I used sticky header for my datatable. But the header always shows on top of the popup.
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
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.
<!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>
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...
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.