{"id":13805983,"url":"https://github.com/ivosdc/svelte-generic-table-pager","last_synced_at":"2025-03-20T03:20:46.906Z","repository":{"id":42706757,"uuid":"271049667","full_name":"ivosdc/svelte-generic-table-pager","owner":"ivosdc","description":"Generic paginator webcomponent. Dispatches page subset of any object array.","archived":false,"fork":false,"pushed_at":"2023-12-26T21:39:30.000Z","size":1043,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-23T15:37:55.412Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","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/ivosdc.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}},"created_at":"2020-06-09T16:10:07.000Z","updated_at":"2022-03-23T10:41:56.000Z","dependencies_parsed_at":"2024-04-10T01:49:42.202Z","dependency_job_id":"b93bba71-1ffc-4078-a7fc-4cbf8dcde772","html_url":"https://github.com/ivosdc/svelte-generic-table-pager","commit_stats":{"total_commits":212,"total_committers":5,"mean_commits":42.4,"dds":0.04245283018867929,"last_synced_commit":"68aee727ad6ac740a87bce3ac4fc9f88530478d7"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-table-pager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-table-pager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-table-pager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivosdc%2Fsvelte-generic-table-pager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivosdc","download_url":"https://codeload.github.com/ivosdc/svelte-generic-table-pager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244240912,"owners_count":20421550,"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:06.876Z","updated_at":"2025-03-20T03:20:46.876Z","avatar_url":"https://github.com/ivosdc.png","language":"Svelte","funding_links":[],"categories":["UI Components"],"sub_categories":["Table"],"readme":"# svelte-generic-table-pager\n\nA svelte paginator using svelte-generic-crud-table.\n\n- Svelte-component: `import GenericTablePager from 'svelte-generic-table-pager'`\n\n[See REPL on svelte.dev:](https://svelte.dev/repl/b81c81da687c432fa407bb6bbd1a1713?version=3.38.2 \"Example\")\n\n## Install\n\n```\nnpm install svelte-generic-table-pager\n```\n\n# Usage\nUse the svelte-generic-table-pager in your component to show, edit, update and delete it's content *paginated*.\nJust include the table as seen in the example below.\n\n## column settings\nAll fields are optional.\n\nSettings regarding a column behaviour can be specified in the table_config.\nOnly wanted keys of your source array have to be mapped by columns_settings *name*. All other attributes are optional.\n```js\n    const table_config = {\n        name: 'Awesome',\n        options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],\n        columns_setting: [\n            {name: 'id', show: false, edit: true, width: '0px'},\n            {name: 'job', show: true, edit: true, width: '150px', description: 'The job'},\n            {name: 'name', show: true, edit: true, width: '150px', tooltip: true},\n            {name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},\n            {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}\n        ],\n        details_text: 'detail'   // replace the standard icon with an text-link\n    }\n```\n- \u003cb\u003e*name*\u003c/b\u003e: the key from your data-array. This is used as column name.\n- *show*: true/false; Should this column displayed? (optional, default: false)\n- *edit*: true/false; Set this field editable or not. (optional, default: false)\n- *width*: px/em; set the field width.  (optional, default: 100px)\n- *description*: A tooltip for the columns name. E.g. to see the full name or other description.  (optional, default: unset)\n- *tooltip*: true/false; When the text does not fit into the field you can show the full text as tooltip.  (optional, default: false)\n- *type*: There are two types:  (optional, default: text)\n    - *text*: Default.\n    - *html*: The value/text will be interpreted as HTML.\n\n[See REPL on svelte.dev:](https://svelte.dev/repl/b81c81da687c432fa407bb6bbd1a1713?version=3.38.2 \"Example\")\n\n###  Svelte-Component:\n```html\n\u003cscript\u003e\n    import GenericTablePager from 'svelte-generic-table-pager/src/GenericTablePager.svelte'\n\n    function handleDelete(event) {\n        const id = event.detail.id; // position in myObjectArray\n        const body = event.detail.body; // object to delete\n        console.log(JSON.stringify(event.detail.body));\n        myObjectArray.slice(id,1);\n    }\n\n    function handleUpdate(event) {\n        const id = event.detail.id; // position in table\n        const body = event.detail.body;\n        console.log(JSON.stringify(body));\n        myObjectArray[id] = body;\n    }\n\n    function handleCreate(event) {\n        console.log(JSON.stringify(event.detail)); // empty object is passed by now\n        myObjectArray.push({id: -1, name:'new Element', sthg:'2345', why:'1234'})\n        const copy = myObjectArray;\n        myObjectArray = [];\n        myObjectArray = copy;\n    }\n\n    function handleDetails(event) {\n        const id = event.detail.id; // position in table\n        const body = event.detail.body;\n        console.log(JSON.stringify(body));\n    }\n\n\n    function handleSort(e) {\n        console.log(e);\n    }\n\n    let myObjectArray = [\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_12\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_13\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_14\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_15\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_16\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_17\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_18\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_19\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_12345\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 1, name: \"A_NAME_1\", sthg: \"A_STHG_1\", why: \"because\"},\n        {id: 2, name: \"A_NAME_2\", sthg: \"A_STHG_2\", why: \"I can\"}\n    ];\n\n\n\u003c/script\u003e\n\n\u003cmain\u003e\n    \u003cGenericTablePager on:delete={handleDelete}\n                       on:update={handleUpdate}\n                       on:create={handleCreate}\n                       on:details={handleDetails}\n                       on:sort={handleSort}\n                       table_config={{\n                           name: 'Awesome:',\n                           options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],\n                           columns_setting: [\n                               {name: 'id', show: false, edit: true, size: '200px'},\n                               {name: 'name', show: true, edit: true, size: '200px'},\n                               {name: 'why', show: true, edit: true, size: '200px'},\n                               {name: 'sthg', show: true, edit: false, size: '200px'}\n                           ],\n                       details_text: 'detail'   // replace the standard icon with an text-link\n                       }}\n                       pager_data={myObjectArray}\n                       pager_config={{\n                                    name: 'crud-table-pager',\n                                    lines: 5,\n                                    steps: [1, 2, 5, 10, 20, 50],\n                                    width: '600px'\n                                    }}/\u003e\u003c/GenericTablePager\u003e\n\u003c/main\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivosdc%2Fsvelte-generic-table-pager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivosdc%2Fsvelte-generic-table-pager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivosdc%2Fsvelte-generic-table-pager/lists"}