{"id":14962746,"url":"https://github.com/joaquimnetocel/svelte-datatables-net","last_synced_at":"2025-05-07T13:07:43.726Z","repository":{"id":74582982,"uuid":"605111669","full_name":"joaquimnetocel/svelte-datatables-net","owner":"joaquimnetocel","description":"svelte-datatables-net is a svelte/sveltekit component that turns data into an interactive HTML table. Inspired by datatables.net.","archived":false,"fork":false,"pushed_at":"2025-05-04T15:09:44.000Z","size":560,"stargazers_count":28,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T13:07:38.682Z","etag":null,"topics":["datatable","datatables","svelte","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-datatables-net","language":"Svelte","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/joaquimnetocel.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-02-22T13:23:50.000Z","updated_at":"2025-05-04T15:09:47.000Z","dependencies_parsed_at":"2024-08-08T02:32:31.350Z","dependency_job_id":"9bdbd459-0ac0-4444-960a-581a89350345","html_url":"https://github.com/joaquimnetocel/svelte-datatables-net","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"0ef2406e865daa88021ba9e29c540b46e5d6570c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-datatables-net","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-datatables-net/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-datatables-net/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-datatables-net/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joaquimnetocel","download_url":"https://codeload.github.com/joaquimnetocel/svelte-datatables-net/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252883220,"owners_count":21819161,"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":["datatable","datatables","svelte","sveltejs","sveltekit"],"created_at":"2024-09-24T13:30:27.278Z","updated_at":"2025-05-07T13:07:43.709Z","avatar_url":"https://github.com/joaquimnetocel.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-datatables-net\n\n![GITHUB VERSION](https://img.shields.io/github/package-json/v/joaquimnetocel/svelte-datatables-net?label=github%20version\u0026logo=github\u0026color=lightgray) ![NPM VERSION](https://img.shields.io/npm/v/svelte-datatables-net?color=red\u0026logo=npm\u0026label=npm%20version) ![NPM Downloads](https://img.shields.io/npm/dw/svelte-datatables-net?color=red\u0026label=npm%20downloads\u0026logo=npm) ![NPM License](https://img.shields.io/npm/l/svelte-datatables-net?color) [![Twitter](https://img.shields.io/twitter/follow/:twitterHandle.svg?style=social\u0026label=@joaquimnetocel)](https://twitter.com/joaquimnetocel)\n\n**svelte-datatables-net** is a svelte/sveltekit component that turns data into an interactive HTML table.\n\n![BOOTSTRAP EXAMPLE](./demonstration.gif)\n\n## VERSIONS\n\n- VERSION 1.0.0 OR ABOVE WORKS WITH SVELTE 5 ONLY (NEWER AND RECOMMENDED VERSIONS WITH IMPROVEMENTS!)\n- PREVIOUS VERSIONS WORKS WITH SVELTE 3, 4 AND 5.\n\n## FEATURES\n\n- POSSIBILITY OF CHOOSING THE SEARCHABLE COLUMNS.\n- POSSIBILITY OF CHOOSING THE SORTABLE COLUMNS.\n- PAGINATION.\n- POSSIBILITY OF CHOOSING AND CHANGING THE NUMBER OF ROWS PER PAGE.\n- NON-OPINIONATED STYLING.\n- NON-OPINIONATED POSITIONING.\n- TYPESCRIPT SUPPORT.\n\n## INSTALLATION\n\n```bash\nnpm install svelte-datatables-net\n```\n\n## EXAMPLES AND DEVELOPING\n\nTo run the examples from `/src/routes`:\n\n```bash\ngit clone https://github.com/joaquimnetocel/svelte-datatables-net.git\ncd svelte-datatables-net\nnpm install\nnpm run dev\n```\n\n## COMPONENT STRUCTURE\n\n- `createData`: A function to create a state with the data.\n- `Search`: A svelte component with a search input.\n- `RowsPerPage`: A svelte component with a select input to choose the number of rows per page.\n- `Pagination`: A svelte component for pagination.\n- `Sort`: A svelte component that enable sorting for a specific column.\n- `typeData`: If you are using typescript, it is a type definition for the data state.\n\n## PARAMETERS AND PROPS\n\n- PARAMETERS OF `createData`:\n\n| PARAMETER        | DESCRIPTION                                                                                                                                                                  | TYPE                                 | REQUIRED | DEFAULT                                     |\n| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | ------------------------------------------- |\n| `data`           | AN ARRAY WITH THE DATA.                                                                                                                                                      | `Generic[]`                          | YES      | -                                           |\n| `searchablekeys` | AN ARRAY WITH THE SEARCHABLE COLUMNS (KEYS OF `data`).                                                                                                                       | `(keyof Generic)[]`                  | NO       | `undefined`                                 |\n| `searchString`   | THE SEARCH STRING CAN BE SET PREVIOUSLY WITH THIS PROP.                                                                                                                      | `string`                             | NO       | `''` (EMPTY STRING)                         |\n| `rowsPerPage`    | THE INITIAL NUMBER OF ROWS PER PAGE.                                                                                                                                         | `string` (NUMERIC STRING OR `'all'`) | NO       | `'all'`                                     |\n| `sortBy`         | THE INITIAL SORT COLUMN (A KEY OF `data`).                                                                                                                                   | `keyof Generic`                      | NO       | `undefined` (NO INITIAL SORTING)            |\n| `sortOrder`      | THE INITIAL SORT ORDER.                                                                                                                                                      | 'ascending' OR 'descending'          | NO       | 'ascending'                                 |\n| `sortFunction`   | A COMPARE FUNCTION THAT SPECIFIES THE INITIAL SORT ORDER. ([MORE DETAILS HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)) | `(a: Generic, b: Generic) =\u003e number` | NO       | A STANDARD FUNCTION TO SORT ALPHABETICALLY. |\n| `activePage`     | ACTIVE PAGE FOR PAGINATION.                                                                                                                                                  | number                               | NO       | `1`                                         |\n\n- PROPS OF `Search`:\n\n| PROP          | DESCRIPTION                          | TYPE                | REQUIRED | DEFAULT        |\n| ------------- | ------------------------------------ | ------------------- | -------- | -------------- |\n| `data`        | data state created with `createData` | `typeData\u003cGeneric\u003e` | YES      | -              |\n| `placeholder` | SEARCH INPUT PLACEHOLDER.            | `string`            | NO       | 'Type here...' |\n| `class`       | CSS CLASSES OF THE SEARCH INPUT.     | `string`            | NO       | -              |\n| `style`       | CSS STYLES OF THE SEARCH INPUT.      | `string`            | NO       | -              |\n\n- PROPS OF `Pagination`:\n\n| PROP            | DESCRIPTION                                | TYPE                | REQUIRED | DEFAULT |\n| --------------- | ------------------------------------------ | ------------------- | -------- | ------- |\n| `data`          | data state created with `createData`       | `typeData\u003cGeneric\u003e` | YES      | -       |\n| `previous`      | PREVIOUS BUTTON TEXT.                      | `string`            | NO       | -       |\n| `next`          | NEXT BUTTON TEXT.                          | `string`            | NO       | -       |\n| `style`         | CSS STYLES FOR PAGINATION ITEMS.           | `string`            | NO       | -       |\n| `class`         | CSS CLASSES FOR PAGINATION ITEMS.          | `string`            | NO       | -       |\n| `styleDisabled` | CSS STYLES FOR DISABLED PAGINATION ITEMS.  | `string`            | NO       | -       |\n| `classDisabled` | CSS CLASSES FOR DISABLED PAGINATION ITEMS. | `string`            | NO       | -       |\n| `styleActive`   | CSS STYLES FOR ACTIVE PAGINATION ITEMS.    | `string`            | NO       | -       |\n| `classActive`   | CSS CLASSES FOR ACTIVE PAGINATION ITEMS.   | `string`            | NO       | -       |\n\n- PROPS OF `RowsPerPage`:\n\n| PROP    | DESCRIPTION                          | TYPE                | REQUIRED | DEFAULT |\n| ------- | ------------------------------------ | ------------------- | -------- | ------- |\n| `data`  | data state created with `createData` | `typeData\u003cGeneric\u003e` | YES      | -       |\n| `class` | CSS CLASSES OF THE SELECT INPUT.     | `string`            | NO       | -       |\n| `style` | CSS STYLES OF THE SELECT INPUT.      | `string`            | NO       | -       |\n\n- PROPS OF `Sort`:\n\n| PROP           | DESCRIPTION                                                                                                                                                          | TYPE                                 | REQUIRED | DEFAULT                                     |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | ------------------------------------------- |\n| `data`         | data state created with `createData`                                                                                                                                 | `typeData\u003cGeneric\u003e`                  | YES      | -                                           |\n| `key`          | COLUMN TO SORT.                                                                                                                                                      | `keyof Generic`                      | YES      | -                                           |\n| `iconSize`     | SIZE OF THE SORT ICON                                                                                                                                                | `number`                             | NO       | 10                                          |\n| `sortFunction` | A COMPARE FUNCTION THAT SPECIFIES THE SORT ORDER. ([MORE DETAILS HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)) | `(a: Generic, b: Generic) =\u003e number` | NO       | A STANDARD FUNCTION TO SORT ALPHABETICALLY. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaquimnetocel%2Fsvelte-datatables-net","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoaquimnetocel%2Fsvelte-datatables-net","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaquimnetocel%2Fsvelte-datatables-net/lists"}