Tabulator with Phoenix LiveView

tabulatorhook.js

Hooks.Tabulator = {
	mounted() {
		let me = this;
		let selectable = 1;
		if (this.el.dataset.selectable) {
			selectable = JSON.parse(this.el.dataset.selectable);
		}
		let table = new Tabulator(this.el, {
			columns: JSON.parse(this.el.dataset.columns),
			selectable: selectable,
			ajaxURL: "dummy_url",
			ajaxRequestFunc: (url, _config, params) => {
				return new Promise((resolve, _reject) => {
					params["id"] = this.el.id
					this.pushEventTo(
						this.el,
						"fetch_data",
						params,
						(reply, _ref) => {
							resolve(reply);
						}
					);
				});
			},
			filterMode: "remote",
			sortMode: "remote",
			pagination: true,
			paginationMode: "remote",
			selectablePersistence: true,
		});

		table.on(
			"rowSelectionChanged",
			function (data, rows, selected, deselected) {
				if (selectable == true && selectable !== 1) {
					me.pushEventTo(
						me.el,
						"tabulator_rowselection_changed",
						data
					);
				}
			}
		);

		table.on("rowSelected", function (row) {
			me.pushEventTo(me.el, "tabulator_rowselected", row.getData());
		});		

		table.on("rowDeselected", function (row) {
			me.pushEventTo(me.el, "tabulator_rowdeselected", {});
		});

		table.on("dataProcessed", function () {
			let rows = this.rowManager.rows
			if(rows.length == 0) {
				this.alert("No se encontraron resultados");
			} else {
				this.clearAlert();
				rows.forEach(row=>{
          if(row.data.selected != null){
            this.selectRow(row)
          }
				})
		  	}
    	});

	this.handleEvent("update_tabulator", function (opts) {
		table.setData();
	});
}
};

users_live.ex

defmodule PortalWeb.UsersLive do
  use PortalWeb, :live_view
  alias Portal.Accounts

  def mount(_params, _session, socket) do
    cols = [
      %{title: "Id User", field: "iduser", headerFilter: true, width: 80},
      %{title: "User Name", field: "username", headerFilter: true, width: 150},
      %{title: "Pass", field: "pass", headerFilter: true, width: 150},
      %{title: "Profile", field: "profile", headerFilter: true, width: 150},
      %{title: "Last Name", field: "lastname", headerFilter: true, width: 150},
      %{title: "First Name", field: "firstname", headerFilter: true, width: 150},
      %{title: "Email", field: "email", headerFilter: true, width: 150},
      %{title: "Created", field: "created", headerFilter: true, width: 150, sorter: "datetime", sorterParams: %{
        format: "YYYY-MM-DD HH:mm:ss",
        alignEmptyValues: "top",
      }},
      %{title: "Requesting", field: "requesting", headerFilter: true, sorter: "boolean", width: 150},
      %{title: "Time Zone", field: "timezone", headerFilter: true, width: 150},
      %{title: "Enablem y Studies", field: "enablemystudies", headerFilter: true, sorter: "boolean", width: 150},
      %{title: "Updated", field: "updated", headerFilter: true, width: 150, sorter: "datetime", sorterParams: %{
        format: "YYYY-MM-DD HH:mm:ss",
        alignEmptyValues: "top",
      }}
    ]

    socket =
      socket
      |> assign(columns: cols)
      |> assign(current_row: nil)
      |> assign(:action, :edit)
      {:ok, socket}
    end

    defp data(%{} = user) do
      %{
        iduser: user.iduser,
        username: user.username,
        pass: user.pass,
        idprofile: user.idprofile,
        profile: user.profile,
        lastname: user.lastname,
        firstname: user.firstname,
        email: user.email,
        created: user.created,
        requesting: user.requesting,
        timezone: user.timezone,
        enablemystudies: user.enablemystudies,
        updated: user.updated
      }
  end
  defp data(_), do: %{}

  def handle_event("fetch_data", params, socket) do
    current_user = socket.assigns.current_user
    usuarios =
      Portal.Accounts.list_users(
        :paged,
        {params["filter"], params["sort"]},
        params["page"],
        25,
        current_user
      )

    res = %{last_page: 200, data: for(usuario <- usuarios.list, do: data(usuario))}
    {:reply, res, socket}
  end

  def handle_event("tabulator_rowselected", row_selected, socket) do
    IO.inspect(row_selected, label: "fila: ")
    socket = assign(socket, current_row: row_selected)
    {:noreply, socket}
  end

  def handle_event("tabulator_rowdeselected", _row_selected, socket) do
    socket =
      assign(socket, current_row: nil)
    {:noreply, socket}
  end

  def handle_event("update_tabulator", _params, socket) do
    {:noreply, push_event(socket, "update_tabulator", %{})}
  end

end

users_live.html.heex

<div id="tabulatorUsuarios" 
     phx-update="ignore" 
     phx-hook="Tabulator" 
     data-columns={Jason.encode!(@columns)}>
</div>