search

DoubleTrade / lit-datatable

lit-datatable is a material design implementation of a data table, powered by lit-element.
Apache License 2.0
57 stars 12 forks source link

I don't know how to see the demo #22

Closed nandoflorestan closed 4 years ago

nandoflorestan commented 4 years ago

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/lit-datatable@0.5.5 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/lit-datatable@0.5.5 serve: `polymer serve`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @doubletrade/lit-datatable@0.5.5 serve script.
RoXuS commented 4 years ago

I added a new npm script "serve". Don't forget to launch build or build:watch before launch serve.

RoXuS commented 4 years ago

And tell me if you have an issue.

nandoflorestan commented 4 years ago

For anyone else trying this out, the incantations that worked for me were:

# First clone this project, then:
npm install
npm run build
npm run-script serve

Okay, now about the demo itself, it is a bit underwhelming right now. There are only 2 data columns and 2 data rows...

The name for each demonstration is in an HTML comment right now. It should be in a h1 tag instead in order to appear on the page, too, so we'd know what is going on.

I had to replace the following line because npm installed web-animations-js in a subdirectory for me:

<script src="../node_modules/@doubletrade/lit-datepicker/node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

Even after that correction, the sorting in the last demo isn't working: When I click the arrow, the arrow itself changes direction, but the table content stays the same.

Finally, I did not see any demonstration of the filter feature. It would be great to have that in the demo.

The of the page is wrong, it says "range-datepicker demo".</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/RoXuS"><img src="https://avatars.githubusercontent.com/u/3296671?v=4" />RoXuS</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>The sorting works with an API or a logic code inside your code. My table doesn't do any sort, you have to handle the sort event then sort the data and give them to the table.</p> <p>Something like this:</p> <pre><code><lit-datatable @sort="${this.handleSort.bind(this)}" .data="${this.myData}"> ... handleSort({detail}) { console.log(detail); this.myData = this.myData.sort.... }</code></pre> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>