{"id":13805573,"url":"https://github.com/DoubleTrade/lit-datatable","last_synced_at":"2025-05-13T19:31:21.189Z","repository":{"id":35095137,"uuid":"193679116","full_name":"DoubleTrade/lit-datatable","owner":"DoubleTrade","description":"lit-datatable is a material design implementation of a data table, powered by lit-element.","archived":false,"fork":false,"pushed_at":"2023-01-07T05:12:21.000Z","size":1519,"stargazers_count":59,"open_issues_count":15,"forks_count":12,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-08T02:10:17.060Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DoubleTrade.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-25T09:39:54.000Z","updated_at":"2025-03-20T08:34:19.000Z","dependencies_parsed_at":"2023-01-15T13:44:33.069Z","dependency_job_id":null,"html_url":"https://github.com/DoubleTrade/lit-datatable","commit_stats":null,"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DoubleTrade%2Flit-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DoubleTrade%2Flit-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DoubleTrade%2Flit-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DoubleTrade%2Flit-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DoubleTrade","download_url":"https://codeload.github.com/DoubleTrade/lit-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012968,"owners_count":21999346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:02.483Z","updated_at":"2025-05-13T19:31:20.754Z","avatar_url":"https://github.com/DoubleTrade.png","language":"TypeScript","funding_links":[],"categories":["Standalone Components"],"sub_categories":[],"readme":"![CI](https://github.com/DoubleTrade/lit-datatable/workflows/CI/badge.svg) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@doubletrade/lit-datatable)\n\n# lit-datatable\n\n`lit-datatable` is a material design implementation of a data table.\n\n![screen](screen.png)\n\n\n## Roadmap\nAdd some helpers.\n\n## Install\n```\nnpm install @doubletrade/lit-datatable\n```\n\n## Launch demo\n```\nnpm install\nnpm run build\nnpm run serve\n```\n\n## Lint\n```\nnpm run lint:javascript\n```\n\n## Data\n```js\n// Data from api\nconst data = [\n  { fruit: 'apple', color: 'green', weight: '100gr' },\n  { fruit: 'banana', color: 'yellow', weight: '140gr' }\n];\n// Conf to set order of column and visibility (can be dynamically)\nconst conf = [\n  { property: 'fruit', header: 'Fruit', hidden: false },\n  { property: 'color', header: 'Color', hidden: true },\n  { property: 'weight', header: 'Weight', hidden: false }\n];\n```\n\n## Simple example\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\"\u003e\u003c/lit-datatable\u003e\n```\n## Simple example with sticky header\n```html\n\u003clit-datatable sticky-header .data=\"${data}\" .conf=\"${conf}\"\u003e\u003c/lit-datatable\u003e\n```\n## With HTML header\nUse native html from lit-html to render a custom header.\nHeader can use value from data and property from conf.\n```js\nconst headerOfFruit = (value, property) =\u003e html`\u003cdiv style=\"color: red;\"\u003e${value}\u003c/div\u003e`;\n```\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" .html=\"${headerOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n## With HTML data\nAs header, use native html from lit-html to render a custom body.\n```js\nconst bodyOfFruit = (value, property) =\u003e html`\u003cdiv style=\"color: red;\"\u003e${value}\u003c/div\u003e`;\n```\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\"\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n## With HTML data and footer\nA footer is available to catch size and page changed in order to relaunch the request to the backend.\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\"\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n\u003clit-datatable-footer\n  @size-changed=\"${this._handleSizeChanged}\"\n  @page-changed=\"${this._handlePageChanged}\"\n  .availableSize=\"${[5, 10, 25]}\"\n  totalPages=\"10\"\n  totalElements=\"24\"\n  size=\"25\"\n  page=\"0\"\n  language=\"en\"\u003e\n\u003c/lit-datatable-footer\u003e\n```\n## With HTML data and sorter\nA default sorter is available, set a header column without html and type `sort`. \nThe sort must be of the following form : `property,direction`, ex: `fruit,asc`.\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\" @sort=\"${this._sortChanged}\" .sort=\"${sort}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" type=\"sort\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n## With HTML data and custom sorter\nYou can use a specific sorter is available in helpers.\n```js\nconst sort = key =\u003e (value, property) =\u003e html`\n  \u003cld-header-with-sort\n    language=\"en\"\n    data-property=\"${property}\"\n    @direction-changed=\"${this.handleSortChanged.bind(this)}\"\n    direction=\"${this._getSortDirection(this.sort, key)}\"\u003e\n    ${value}\n  \u003c/ld-header-with-sort\u003e`;\n```\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" .html=\"${sort}\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n## Custom style on a td\n```html\n\u003clit-datatable-column column=\"${true}\" property=\"fruit\" columnStyle=\"padding: 0; min-width: initial;\"\u003e\u003c/lit-datatable-column\u003e\n```\n\n## With HTML data and filter\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\" @filter=\"${this.filterChanged}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" type=\"filter\" .filterValue=\"${this.filter}\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n\n## With HTML data, sort and filter\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\" @filter=\"${this.filterChanged}\".sort=\"${this.sort}\" @sort=\"${this.sortChanged}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" type=\"filterSort\" .filterValue=\"${this.filter}\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n\n## With HTML data and choices filter\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\" @choices=\"${this.choicesChanged}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" type=\"choices\" .choices=\"${this.availableChoices}\" .selectedChoices=\"${this.choices}\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n\n## With HTML data and choices filter with value filtering\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\" @choices=\"${this.choicesChanged}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" enableFilter type=\"choices\" .choices=\"${this.availableChoices}\" .selectedChoices=\"${this.choices}\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n\n## With HTML data and date filter\nThe format of startDate and endDate is a timestamp.\n```html\n\u003clit-datatable .data=\"${data}\" .conf=\"${conf}\" @dates=\"${this.datesChanged}\"\u003e\n  \u003clit-datatable-column header=\"${true}\" property=\"fruit\" type=\"dateSort\" .start=\"${this.startDate}\" .end=\"${this.endDate}\"\u003e\u003c/lit-datatable-column\u003e\n  \u003clit-datatable-column column=\"${true}\" property=\"fruit\" .html=\"${bodyOfFruit}\"\u003e\u003c/lit-datatable-column\u003e\n\u003c/lit-datatable\u003e\n```\n\n---\n\n[![Testing Powered By SauceLabs](https://opensource.saucelabs.com/images/opensauce/powered-by-saucelabs-badge-white.png?sanitize=true 'Testing Powered By SauceLabs')](https://saucelabs.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDoubleTrade%2Flit-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDoubleTrade%2Flit-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDoubleTrade%2Flit-datatable/lists"}