{"id":20207563,"url":"https://github.com/dritter/extended-table","last_synced_at":"2025-04-10T12:34:17.133Z","repository":{"id":51023302,"uuid":"246561743","full_name":"dritter/extended-table","owner":"dritter","description":null,"archived":false,"fork":false,"pushed_at":"2023-06-06T20:52:59.000Z","size":810,"stargazers_count":6,"open_issues_count":6,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T11:21:20.160Z","etag":null,"topics":["data-table","data-tables","datatable","datatables","svelte","table"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dritter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-03-11T12:13:31.000Z","updated_at":"2023-05-31T23:09:21.000Z","dependencies_parsed_at":"2024-11-14T05:30:01.023Z","dependency_job_id":"f7752fe8-6e97-42f1-a671-2f8dbde1c02c","html_url":"https://github.com/dritter/extended-table","commit_stats":{"total_commits":181,"total_committers":2,"mean_commits":90.5,"dds":0.08839779005524862,"last_synced_commit":"7f8a840b73df334998ff89e03f81afd8c33b54d7"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dritter%2Fextended-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dritter%2Fextended-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dritter%2Fextended-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dritter%2Fextended-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dritter","download_url":"https://codeload.github.com/dritter/extended-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248102559,"owners_count":21048200,"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":["data-table","data-tables","datatable","datatables","svelte","table"],"created_at":"2024-11-14T05:29:53.678Z","updated_at":"2025-04-10T12:34:17.112Z","avatar_url":"https://github.com/dritter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ExtendedTable\n\n![Node.js CI](https://github.com/dritter/extended-table/workflows/Node.js%20CI/badge.svg)\n![Performance Tests](https://github.com/dritter/extended-table/workflows/Continuous%20Performance%20Tests/badge.svg)\n\n## Usage\n\n```html\n\u003cscript\u003e\n    import ExtendedTable from \"extended-table\";\n    \n    let rows = [\n        { startnumber: {number: 1}},\n        { startnumber: {number: 2}},\n        { startnumber: {number: 3}},\n        { startnumber: {number: 4}},\n    ];\n    \n    let columnDefinition = [\n        {\n            title: 'Start\u0026shy;number',\n            propertyPath: 'startnumber.number'\n        },\n    ];\n\u003c/script\u003e\n\n\u003cExtendedTable columns={columnDefinition} data={rows}\u003e\n\u003c/ExtendedTable\u003e\n```\n\n## Examples\n\nHave a [look at the examples folder](examples/README.md).\n\n## Features\n\n### Sorting\n\nTo make a column sortable, set `sortable: true` in the column definition. The\ncolumn needs to have a property path set to make sorting work.\n\nInitial sorting could be controlled via the props `initialSortBy` and\n`initialSortDirection`, where `initialSortBy` is a property path (string).\n\nIn case you want to allow sorting only one column, you need to set\n`multisort={false}`.\n\n### Flexible Rendering\n\nThe easiest way to render a column is to provide a `propertyPath`. This could\neven be in a nested Object. Have a look at [deep-value](https://github.com/seidme/jsier/tree/master/deep-value#usage)\nto see more ways how to express paths.\n\nTo render slightly more complex data you could specify `value`, that needs to\nbe a function:\n```JavaScript\n    value: (rowData, rowIndex, columnIndex) =\u003e `Place ${rowIndex + 1}: ${rowData.name}`\n```\n\nIf this is not enough, you could render columns as slots. You could currently\nspecify no more than 20 slots due to a [limitation in Svelte](https://github.com/sveltejs/svelte/issues/3480). All slots are\nnamed `column-X`, `X` being the number:\n```html\n\u003cExtendedTable columns={columnDefinition} data={rows}\u003e\n    \u003cdiv slot=\"column-1\" let:data={person} let:rowIndex={index}\u003e\n        \u003cPerson person=\"{person}\" on:edited={event =\u003e setValue(event.detail, index)}\u003e\u003c/Person\u003e\n    \u003c/div\u003e\n\u003c/ExtendedTable\u003e\n```\n\nOf course, all three ways can be combined per Table. On a column level you have to\ndecide on one way.\n\n### Flexible CSS Classes\n\nHave a look at the [theming example](examples/theming/README.md) where this is\nexplained.\n\n### ClickHandlers\n\nTo specify what happens when you click on a Row, you could set the `onRowClick`\nproperty. This should be a callback function.\n\nFor controlling what happens if you click a table cell, you could add a `clickHandler`\non the column definition.\n\n### Collapsible Columns\n\nIf you have very large columns, you can render them as collapsible by setting\n`collapsed: false` on the column definition.\n\n### Auto collapse Columns\n\nWhen `autoCollapse={true}` is set, all Columns that are outside of the screen\nare collapsed automatically. You still could collapse other columns manually,\nif you want. \n\n### Sticky Headers\n\nJust set the `stickyHeaders={true}` prop, and you are ready. Please note, that\nspecifying an overflow on a parent element will break the stickyness.\n\nAdditionally, you could define an offset, if you use fixed elements above (like\na navigation header). Set `stickyOffset=\"100px\"`.\n\n## Limitations\n\nThis component aims for comfort more than for performance. So if you want to\ndisplay thousands of rows, you may run into performance issues.\n\n## FAQ\n\n### How to add an extra row with colspan?\n\nThis could be done, if you fill the slot `additionalRow`. You'll get the data\nas `rowData`. Example:\n```html\n    \u003ctr slot=\"additionalRow\" let:rowData={crew} class=\"keep-together\"\u003e\n        \u003ctd colspan=\"7\"\u003e\n            \u003cMyOtherComponent myProp={crew} /\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n```\n\n### How can I expand all collapsed columns on first click?\n\nIf you set `expandAll={true}`, all collapsed columns will expand at once.\n\n### Why is there no pagination?\n\nIMHO, putting a pagination into this component would be too much. This should\nbe done from outside.\n\n### How can I filter rows?\n\nLike pagination this should be done from the outside. So its up to you to add\na filter.\n\n### How can I use my own sorting function?\n\nTo use your own sorting function, you can set `sortingFunction={yourSortFunction}`\nproperty. This function gets called when you click on a header column. Parameters\nare:\n  - `column` (Object) - the current column that was clicked on\n  - `columns` (array) - All columns\n  - `data` (array) - The rows\n  - `multisort` (boolean) - `true`, if sorting for multiple columns is enabled\n  - `clearCacheCallback` (function) - Callback to clear the caches\n\n## Troubleshooting\n\nSee [Troubleshooting Guide](TROUBLESHOOTING.md).\n\n## Dependencies\n\nCurrently there are three dependencies:\n  - [fast-sort](https://github.com/snovakovic/fast-sort) for sorting\n  - [deep-value](https://github.com/seidme/jsier/tree/master/deep-value) for\n    propertyPath resolution\n\n## Benchmarks\n\n[See here](https://dritter.github.io/extended-table/dev/bench/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdritter%2Fextended-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdritter%2Fextended-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdritter%2Fextended-table/lists"}