{"id":16934263,"url":"https://github.com/hansihe/data_table","last_synced_at":"2025-06-15T22:06:38.098Z","repository":{"id":180406735,"uuid":"658701189","full_name":"hansihe/data_table","owner":"hansihe","description":"Simple and flexible DataTable component for LiveView","archived":false,"fork":false,"pushed_at":"2024-10-16T11:52:32.000Z","size":220,"stargazers_count":63,"open_issues_count":9,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-04T13:14:03.615Z","etag":null,"topics":["elixir","liveview","phoenix"],"latest_commit_sha":null,"homepage":"https://hexdocs.pm/data_table/","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hansihe.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":"2023-06-26T10:13:44.000Z","updated_at":"2025-03-29T06:53:18.000Z","dependencies_parsed_at":"2024-02-10T19:29:12.226Z","dependency_job_id":"c14d8223-56bb-4d27-92a7-c7ca25cd64ab","html_url":"https://github.com/hansihe/data_table","commit_stats":null,"previous_names":["hansihe/data_table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hansihe%2Fdata_table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hansihe%2Fdata_table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hansihe%2Fdata_table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hansihe%2Fdata_table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hansihe","download_url":"https://codeload.github.com/hansihe/data_table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182417,"owners_count":20897381,"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":["elixir","liveview","phoenix"],"created_at":"2024-10-13T20:51:41.488Z","updated_at":"2025-04-06T00:07:04.907Z","avatar_url":"https://github.com/hansihe.png","language":"Elixir","readme":"# DataTable\n\n[Docs](https://hexdocs.pm/data_table/DataTable.html)\n\nA flexible DataTable component for LiveView.\n\n![Screenshot of simple DataTable usage](screenshot.png \"Simple DataTable usage\")\n[Source code for the screenshot above. You get all of this in ~50loc.](https://github.com/hansihe/data_table/blob/main/example/lib/example_web/live/articles.ex)\n\nSome of the features the component has:\n* Filtering\n* Sorting\n* Expandable rows\n* Pagination\n* Row selection with customizable bulk actions\n* Data is fetched from `DataTable.Source` behaviour, usable with custom data sources\n* First class Ecto `Source`\n* Support for persisting sort/filter state to query string\n* Tailwind theme included, but fully customizable\n\n```elixir\ndef render(assigns) do\n  ~H\"\"\"\n  \u003cDataTable.live_data_table\n    id=\"table\"\n    source={{DataTable.Ecto, {MyApp.Repo, @source_query}}}\u003e\n\n    \u003c:col :let={row} name=\"Id\" fields={[:id]} sort_field={:id}\u003e\n      \u003c%= row.id %\u003e\n    \u003c/:col\u003e\n\n    \u003c:col :let={row} name=\"Name\" fields={[:first_name, :last_name]}\u003e\n      \u003c%= row.first_name \u003c\u003e \" \" \u003c\u003e row.last_name %\u003e\n    \u003c/:col\u003e\n\n  \u003c/DataTable.live_data_table\u003e\n  \"\"\"\nend\n\ndef mount(_params, _session, socket) do\n  query = DataTable.Ecto.Query.from(\n    user in MyApp.User,\n    fields: %{\n      id: user.id,\n      first_name: user.first_name,\n      last_name: user.last_name\n    },\n    key: :id\n  )\n\n  socket = assign(socket, :source_query, query)\n\n  [...]\nend\n```\n\n## Installation\nFirst you need to add `data_table` to your `mix.exs`:\n\n```elixir\ndefp deps do\n  [\n    {:data_table, \"~\u003e 1.0\"}\n  ]\nend\n```\n\nIf you want to use the default `Tailwind` theme, you need to set up `tailwind` to include styles\nfrom the `data_table` dependency.\n\nAdd this to the `content` list in your `assets/tailwind.js`:\n```js\n\"../deps/data_table/**/*.*ex\"\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhansihe%2Fdata_table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhansihe%2Fdata_table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhansihe%2Fdata_table/lists"}