{"id":20146199,"url":"https://github.com/evoluteur/isomorphic-table-cards","last_synced_at":"2025-04-09T19:21:33.875Z","repository":{"id":146728811,"uuid":"300770456","full_name":"evoluteur/isomorphic-table-cards","owner":"evoluteur","description":"Table and Cards views with animated transitions on sorting, switching view, and browser resizing (no dependencies, just vanilla Javascript, CSS, and HTML).","archived":false,"fork":false,"pushed_at":"2025-01-04T09:01:20.000Z","size":185,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-23T21:11:34.519Z","etag":null,"topics":["animated-transitions","animation","animation-css","animation-effects","card","cards","cards-views","cardview","css-animations","css3-animations","isomorphic","isomorphism","javascript","morph","table","table-view","tabular-data","transformation","transition","transition-animation"],"latest_commit_sha":null,"homepage":"https://evoluteur.github.io/isomorphic-table-cards/","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/evoluteur.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"evoluteur"}},"created_at":"2020-10-03T01:14:20.000Z","updated_at":"2025-02-15T18:12:42.000Z","dependencies_parsed_at":"2024-10-31T08:45:25.890Z","dependency_job_id":null,"html_url":"https://github.com/evoluteur/isomorphic-table-cards","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fisomorphic-table-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fisomorphic-table-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fisomorphic-table-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fisomorphic-table-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evoluteur","download_url":"https://codeload.github.com/evoluteur/isomorphic-table-cards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248095236,"owners_count":21046814,"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":["animated-transitions","animation","animation-css","animation-effects","card","cards","cards-views","cardview","css-animations","css3-animations","isomorphic","isomorphism","javascript","morph","table","table-view","tabular-data","transformation","transition","transition-animation"],"created_at":"2024-11-13T22:20:26.866Z","updated_at":"2025-04-09T19:21:33.866Z","avatar_url":"https://github.com/evoluteur.png","language":"JavaScript","readme":"# Isomorphic-Table-Cards \u0026middot; [![GitHub license](https://img.shields.io/github/license/evoluteur/meet-the-fans)](https://github.com/evoluteur/isomorphic-table-cards/blob/master/LICENSE)\n\nIsomorphic-Table-Cards is a Javascript class for Table and Cards views with animated transitions on sorting, view toggle, and browser resizing.\n\nCheck out the [live demo](https://evoluteur.github.io/isomorphic-table-cards/index.html).\n\n[![screenshot](https://raw.github.com/evoluteur/isomorphic-table-cards/master/screenshot.gif)](https://evoluteur.github.io/isomorphic-table-cards/index.html)\n\n## Usage\n\nThe [code](https://github.com/evoluteur/isomorphic-table-cards) is just Vanilla Javascript, CSS, and HTML.\n\n### Importing the code\n\nIn the \"head\" section your html page, import the Javascript and CSS:\n\n```html\n\u003clink href=\"css/isomorphic-table-cards.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"js/isomorphic-table-cards.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\n### Config options\n\nIsomorphic-Table-Cards is a Javascript class with configuration options for re-use.\n\n**data**: data to display (JSON array).\n\n**selector**: CSS selector for the root element which will hold the cards or table.\n\n**rowHeight**: Row height (in pixels).\n\n**cardHeight**: Card height (in pixels).\n\n**cardWidth**: Card width (in pixels).\n\n**itemTemplate**: HTML template to display an item. It is the same for both table and cards views, only the CSS changes.\n\n**sort**: Function for sorting the data (arguments: data, key, direction).\n\n### Methods\n\n**render()**: Initial rendering method.\n\n**redraw(style)**: Redraw method (style=\"table\" or \"cards\").\n\n**sort(key)**: Sort method (key=data attribute to sort by).\n\n### Example\n```javascript\nconst tableCards = new IsomorphicTableCards({\n  data: \u003cyourData\u003e,\n  selector: \".holder\",\n  // row and card dimensions\n  rowHeight: 30,\n  cardHeight: 100,\n  cardWidth: 250,\n  // item template\n  itemTemplate: d =\u003e `\u003cdiv class=\"item\" id=\"${d.name}\"\u003e\n      \u003cdiv class=\"c1\"\u003e\n        ${d.name}\n      \u003c/div\u003e\n      \u003cdiv class=\"c2\"\u003e\n        ${d.descriptionn}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  // sort function\n  sort: (data, key, direction) =\u003e data.sort((a, b) =\u003e direction*a[key].localeCompare(b[key]))   }\n});\n\ntableCards.render()\n```\n\nThe same animations can also be done [using D3.js](https://evoluteur.github.io/d3-table-cards/).\n\n## License\n\nIsomorphic-Table-Cards is open source at [GitHub](https://github.com/evoluteur/isomorphic-table-cards) with MIT license.\n\n(c) 2025 [Olivier Giulieri](https://evoluteur.github.io/).\n","funding_links":["https://github.com/sponsors/evoluteur"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fisomorphic-table-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevoluteur%2Fisomorphic-table-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fisomorphic-table-cards/lists"}