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
- Sorting
- Filtering
- Pagination
- Row selection
- Row editing
- Drag and drop reorderable columns
- No CSS, and therefore no opinion on how it looks. Bring your own styles
- Ability to enable/disable features
- A just-ok API!
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:
span.autotable__sort-indicator
- The up/down arrow that displays the sorting direction for a column.div.autotable__pagination
- Container for the pagination buttons.button.autotable__pagination-page
- The pagination buttons themselves.button.autotable__pagination-active
- The pagination button for the current page.th.autotable__column
- All standard column headers.th.autotable__column-{key}
- Header cell for the column with the givenkey
. Most likely to be used to set the column's width.th.autotable__column-filter
- All column filter cells.th.autotable__column-filter-{key}
- Filter input cell for the column with the givenkey
. Should probably be set to the same width as the class above, if set.th.autotable__checkbox-header
- Both checkbox header cells. Most likely used to set the column's width.td.autotable__checkbox
- Checkbox cells.th.autotable__actions-header
- Both action header cells (e.g. edit button). Most likely used to set the column's width.th.autotable__actions
- Action cells.
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.