{"id":19501254,"url":"https://github.com/acryps/page-data-table","last_synced_at":"2026-06-30T07:31:46.876Z","repository":{"id":203104545,"uuid":"708759094","full_name":"acryps/page-data-table","owner":"acryps","description":"Data Table","archived":false,"fork":false,"pushed_at":"2024-04-10T12:02:21.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T21:32:48.179Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acryps.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-23T10:35:12.000Z","updated_at":"2023-10-23T10:36:27.000Z","dependencies_parsed_at":"2024-11-10T22:22:09.571Z","dependency_job_id":null,"html_url":"https://github.com/acryps/page-data-table","commit_stats":null,"previous_names":["acryps/page-data-table"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/acryps/page-data-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fpage-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fpage-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fpage-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fpage-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acryps","download_url":"https://codeload.github.com/acryps/page-data-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Fpage-data-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34957626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-10T22:12:02.669Z","updated_at":"2026-06-30T07:31:46.859Z","avatar_url":"https://github.com/acryps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# page data table\nCreate complex data entry tables with ease\n\n- Supports shortcuts to switch between cells, fields and rows\n- Smart paste from spreadsheet applications like Excel or Google Docs\n- Simple, yet expandable API\n\n## usage\nExtend the `DataTable` class and use your component in a page component.\nYou can extend all of the functions of the DataTable or just use the default implementation.\nThe functions are documented in code.\n\nWe do not provide default styles, except for styles required for the table to render as a table. Include them from `source/index.scss`.\n\n```\nexport class BookPricesComponent extends Component {\n\tbooks: Book[];\n\teditions: Edition[];\n\n\tasync onload() {\n\t\tthis.books = // get your books\n\t\tthis.editions = // get your variants, like hardcover, e-book and pocket book\n\t}\n\n\trender() {\n\t\treturn \u003cui-books\u003e\n\t\t\t\u003cui-title\u003eBook Prices\u003c/ui-title\u003e\n\n\t\t\t{new BookPriceTable(books, editions)}\n\t\t\u003c/ui-books\u003e;\n\t}\n}\n\nclass BookPriceTable extends DataTable\u003cEdition, Book\u003e {\n\trenderColumnHeader(edition: Edition) {\n\t\treturn edition.name;\n\t}\n\n\trenderRowHeaders(book: Book) {\n\t\treturn [\n\t\t\tbook.name,\n\t\t\tnew AuthorComponent(book.author)\n\t\t];\n\t}\n\n\trenderCell(edition: Edition, book: Book) {\n\t\tlet bookEdition = option.standards.find(standard =\u003e standard.standardsAgencyId == agency.id) ?? new StandardizedOptionViewModel();\n\n\t\tconst nameField = \u003cinput \n\t\t\ttype='number'\n\t\t\t$ui-value={bookEdition.price} \n\t\t\tui-change={() =\u003e save()}\n\t\t\tui-target='price'\n\t\t/\u003e;\n\t\t\n\t\tconst productCodeField = \u003cinput \n\t\t\ttype='text'\n\t\t\t$ui-value={bookEdition.isbn} \n\t\t\tui-change={() =\u003e save()}\n\t\t\tui-target='isbn'\n\t\t/\u003e\n\n\t\tconst save = async () =\u003e {\n\t\t\t// save the changes\n\t\t};\n\n\t\treturn [nameField, productCodeField];\n\t}\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facryps%2Fpage-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facryps%2Fpage-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facryps%2Fpage-data-table/lists"}