https://github.com/hansihe/data_table

Simple and flexible DataTable component for LiveView
https://github.com/hansihe/data_table

elixir liveview phoenix

Last synced: 2 days ago
JSON representation

Simple and flexible DataTable component for LiveView

• Host: GitHub
• URL: https://github.com/hansihe/data_table
• Owner: hansihe
• License: apache-2.0
• Created: 2023-06-26T10:13:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-16T11:52:32.000Z (2 months ago)
• Last Synced: 2024-12-24T01:52:28.850Z (3 days ago)
• Topics: elixir, liveview, phoenix
• Language: Elixir
• Homepage: https://hexdocs.pm/data_table/
• Size: 215 KB
• Stars: 56
• Watchers: 5
• Forks: 6
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DataTable

[Docs](https://hexdocs.pm/data_table/DataTable.html)

A flexible DataTable component for LiveView.

![Screenshot of simple DataTable usage](screenshot.png "Simple DataTable usage")

[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)

Some of the features the component has:

* Filtering

* Sorting

* Expandable rows

* Pagination

* Row selection with customizable bulk actions

* Data is fetched from `DataTable.Source` behaviour, usable with custom data sources

* First class Ecto `Source`

* Support for persisting sort/filter state to query string

* Tailwind theme included, but fully customizable

```elixir

def render(assigns) do

  ~H"""

  

    <:col :let={row} name="Id" fields={[:id]} sort_field={:id}>

      <%= row.id %>

    

    <:col :let={row} name="Name" fields={[:first_name, :last_name]}>

      <%= row.first_name <> " " <> row.last_name %>

    

  

  """

end

def mount(_params, _session, socket) do

  query = DataTable.Ecto.Query.from(

    user in MyApp.User,

    fields: %{

      id: user.id,

      first_name: user.first_name,

      last_name: user.last_name

    },

    key: :id

  )

  socket = assign(socket, :source_query, query)

  [...]

end

```

## Installation

First you need to add `data_table` to your `mix.exs`:

```elixir

defp deps do

  [

    {:data_table, "~> 1.0"}

  ]

end

```

If you want to use the default `Tailwind` theme, you need to set up `tailwind` to include styles

from the `data_table` dependency.

Add this to the `content` list in your `assets/tailwind.js`:

```js

"../deps/data_table/**/*.*ex"

```