{"id":13474693,"url":"https://github.com/aminya/solid-simple-table","last_synced_at":"2025-04-14T16:34:14.201Z","repository":{"id":39651605,"uuid":"324089302","full_name":"aminya/solid-simple-table","owner":"aminya","description":"Blazing fast Table component with solid-js","archived":false,"fork":false,"pushed_at":"2023-11-26T03:25:51.000Z","size":1153,"stargazers_count":53,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T05:12:31.424Z","etag":null,"topics":["component","fast","react","solid","solid-js","svelte","table","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/solid-simple-table","language":"TypeScript","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/aminya.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}},"created_at":"2020-12-24T06:57:44.000Z","updated_at":"2024-05-15T14:08:38.000Z","dependencies_parsed_at":"2024-01-14T02:40:01.383Z","dependency_job_id":null,"html_url":"https://github.com/aminya/solid-simple-table","commit_stats":{"total_commits":254,"total_committers":4,"mean_commits":63.5,"dds":"0.019685039370078705","last_synced_commit":"f35115ce1bec4585138566931fd115aad64e1bd9"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminya%2Fsolid-simple-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminya%2Fsolid-simple-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminya%2Fsolid-simple-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminya%2Fsolid-simple-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aminya","download_url":"https://codeload.github.com/aminya/solid-simple-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248916890,"owners_count":21182883,"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":["component","fast","react","solid","solid-js","svelte","table","vue"],"created_at":"2024-07-31T16:01:14.100Z","updated_at":"2025-04-14T16:34:14.175Z","avatar_url":"https://github.com/aminya.png","language":"TypeScript","readme":"# Solid SimpleTable\n\n![CI](https://github.com/aminya/solid-simple-table/workflows/CI/badge.svg)\n\nSolid SimpleTable is a blazing fast reactive table component that gives you freedom.\n\n### Features\n\n- Very fast as it is compiled down to VanilaJS using Solid\n- Very small (~2.7KB)\n- Automatic sorting\n- Support for custom header and row renderers (so the cells can be components themselves)\n- Support for custom sort functions\n- Support for onClick on all rows\n- Support for DOM accessors\n- The library is fully tested with 90% of code coverage.\n\n![Simple table demo](other/simple-table-demo.gif)\n\nThis library is production ready. It is currently used as the linter panel of Atom editor!\n\n![Atom Linter Panel](other/atom-linter-panel.png)\n\n## Installation\n\n      npm install --save solid-simple-table\n\n## Usage\n\n[**Run demo here!**](https://aminya.github.io/solid-simple-table/)\n\n```js\nimport { render } from \"solid-js/web\"\n\nimport { SimpleTable } from \"solid-simple-table\"\nimport type { SortDirection } from \"solid-simple-table\"\n\nconst rows = [\n  { file: \"C:/a\", message: \"Folder a\", severity: \"error\" },\n  { file: \"C:/b\", message: \"Folder b\", severity: \"warning\" },\n  { file: \"C:/c\", message: \"Folder c\", severity: \"info\" },\n  { file: \"C:/d\", message: \"Folder d\", severity: \"error\" },\n]\n\nfunction MyTable() {\n  return \u003cSimpleTable rows={rows} /\u003e\n}\n\nrender(() =\u003e \u003cMyTable /\u003e, document.getElementById(\"app\"))\n```\n\nThe css is available under `dist/SimpleTable.css` which you can import into HTML:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"solid-simple-table/dist/SimpleTable.css\" /\u003e\n```\n\nor in JavaScript:\n\n```js\nimport \"solid-simple-table/dist/SimpleTable.css\";\n```\n\nFor other examples, see [the demo folder](https://github.com/aminya/solid-simple-table/tree/master/demo).\n\n## API\n\n```ts\n\n\u003cSimpleTable\n  // rows\n  rows: Array\u003cRow\u003e\n\n  // Optional props:\n\n  // columns\n\n  // manually provided columns\n  columns?: Array\u003cColumn\u003cK\u003e\u003e\n\n  /**\n    if columns is not provided and Row is an object, construct columns based on this row\n    Takes this Row's keys as Column IDs\n    @default 0 (first row)\n  */\n  representativeRowNumber?: number\n\n  // renderers\n  headerRenderer?(column: Column): string | Renderable\n  bodyRenderer?(row: Row, columnID: K): string | Renderable\n\n  // dynamic CSS classes for table cells\n  headerCellClass?(column: Column): string\n  bodyCellClass?(row: Row, columnID: K): string\n\n  // the class name to be used instead of the provided default. The default value is `solid-simple-table light typography`\n  className?: string\n  // extra styles\n  style?: JSX.CSSProperties | string\n\n  // sort options\n  defaultSortDirection?: NonNullSortDirection\u003cK\u003e\n  rowSorter?(rows: Array\u003cRow\u003e, sortDirection: NonNullSortDirection\u003cK\u003e): Array\u003cRow\u003e\n\n\n  // accessors\n\n  /**\n    set to true if you want column, row, and cell accessors\n    @default false\n  */\n  accessors?: boolean\n\n  /** a function that takes row and returns string unique key for that row\n    @default {defaultGetRowID}\n  */\n  getRowID?(row: Row): string\n\n/\u003e;\n```\n\nIn which:\n\n```ts\n// util types\nexport type Renderable = any\nexport type IndexType = string | number\n\n// row and column types\nexport type Row = number | string | Record\u003cIndexType, any\u003e\nexport type Column\u003cK extends IndexType = IndexType\u003e = {\n  id: K\n  label?: string\n  sortable?: boolean\n  onClick?(e: MouseEvent, row: Row): void\n}\n\n/**\n * Sort direction. It is a tuple:\n *\n * @type is The direction of the sort\n * @columnID is the key used for sorting\n */\nexport type NonNullSortDirection\u003cK extends IndexType = IndexType\u003e = [columnID: K, type: \"asc\" | \"desc\"]\nexport type SortDirection\u003cK extends IndexType = IndexType\u003e = NonNullSortDirection\u003cK\u003e | [columnID: null, type: null]\n```\n\n## Projects using Solid-Table\n\n- [Atom's Linter](https://github.com/steelbrain/linter-ui-default)\n\n## License\n\nThis package is licensed under the terms of MIT License. Originally, it was inspired by [sb-react-table](https://github.com/steelbrain/react-table/tree/2f8472960a77ca6cf2444c392697772716195bf4).\n","funding_links":[],"categories":["TypeScript","📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faminya%2Fsolid-simple-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faminya%2Fsolid-simple-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faminya%2Fsolid-simple-table/lists"}