sli/autotable - version: 1.0.0

for more information visit the package's GitHub page

Package contains the following modules:

Autotable

An in-development datatable for Elm. The code is going to be a bit bad for a while but the functionality should work as advertised regardless.

Features

Styling

The table itself does no styling beyond two column widths. To style the demo, I use elm-css. The table itself has the class autotable, so that can be used to style anything within the table. Learn your CSS selectors if you haven't already. There are also a few more class names in use that can (and should) be styled:

Usage

If you're going to use drag and drop columns, you'll need this Javascript:

document.body.addEventListener('dragstart', e =>
  e.dataTransfer.setData('text/plain', null))

Here's a minimal example:

import Autotable as AT
import Autotable.Options exposing (..)

type Model =
  { tableState : AT.Model }

type Msg
  = TableMsg AT.Msg

options : Options
options =
    Options Sorting Filtering Selecting Dragging Editing (Pagination 10) (Fill 10)

{-| Ideally `data` and `columns` are defined somewhere.
-}
init : () -> ( Model, Cmd Msg )
init _ =
  { tableState = AT.init "my-table" columns data options }

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    TableMsg tableMsg ->
      ( { model | tableState = AT.update tableMsg model.tableState }, Cmd.none )

view : Model -> Html Msg
view model =
  div [] [ AT.view model.tableState TableMsg ]

For a more complete example, see the basic one.