https://github.com/kishanov/re-frame-datatable

DataTable component for re-frame library
https://github.com/kishanov/re-frame-datatable

Last synced: about 1 month ago
JSON representation

DataTable component for re-frame library

• Host: GitHub
• URL: https://github.com/kishanov/re-frame-datatable
• Owner: kishanov
• License: epl-1.0
• Created: 2016-12-14T19:39:52.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-09-10T00:32:53.000Z (over 7 years ago)
• Last Synced: 2024-10-28T13:39:15.590Z (about 2 months ago)
• Language: Clojure
• Homepage: https://kishanov.github.io/re-frame-datatable/
• Size: 1.37 MB
• Stars: 103
• Watchers: 10
• Forks: 16
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-re-frame - re-frame-datatable - frame library (Tools / Utils)

README

        
# re-frame-datatable

A UI component for [re-frame](https://github.com/Day8/re-frame).

Uses existing subscription to data source in re-frame's `app-db` and declarative definition of how to render it as a table.

Supports sorting, pagination and some basic CSS manipulations for generated table.

## Quick links

* [Documentation Website](https://kishanov.github.io/re-frame-datatable/) - re-frame app that shows how to use differt DataTable options

* [Complete example app](https://kishanov.github.io/re-frame-datatable-example/) - GMail-like interface which uses most of the features of DataTable component

## Usage

Leiningen

[![Leiningen version](https://clojars.org/re-frame-datatable/latest-version.svg)](http://clojars.org/re-frame-datatable)

In your application add the following dependency to the file that defines views in your re-frame application:

```clojure

(ns re-frame-datatable-docs.views

  (:require [re-frame-datatable.core :as dt]

            [your.app.subs :as subs] ; Namespace in which re-frame subscriptions are defined

           ;...))

```

Here is a sample [Reagent](https://github.com/reagent-project/reagent) component which defines datatable (assuming that `subs` namespace constains `::songs-list` subscription which returns data in the following format: `[{:index 1 :name "Mister Sandman" :duration 136} ...]`)

```clojure

(defn sneak-peek-for-readme []

  [dt/datatable

   :songs

   [::subs/songs-list]

   [{::dt/column-key   [:index]

     ::dt/sorting      {::dt/enabled? true}

     ::dt/column-label "#"}

    {::dt/column-key   [:name]

     ::dt/column-label "Name"}

    {::dt/column-key   [:duration]

     ::dt/column-label "Duration"

     ::dt/sorting      {::dt/enabled? true}

     ::dt/render-fn    (fn [val]

                         [:span

                          (let [m (quot val 60)

                                s (mod val 60)]

                            (if (zero? m)

                              s

                              (str m ":" (when (< s 10) 0) s)))])}]

   {::dt/pagination    {::dt/enabled? true

                        ::dt/per-page 5}

    ::dt/table-classes ["ui" "table" "celled"]}])

```

`dt/datatable` component accepts the following arguments:

* `datatable-key` - a keyword, that will be used in re-frame's `app-db` to store datatable state

* `subscription-vec` - a vector, which will be used by datatable to render data via `(re-frame/subscribe subscription-vec)`

* `columns-def` - a vector of maps, that defines how each column of datatable should look like

* `options` - optional map of additional options

For the complete documenation and live examples visit [Documentation website](https://kishanov.github.io/re-frame-datatable/).

## How it works

`re-frame-datatable` expects a re-frame subscription, that returns a collection of maps. It will render an HTML table (using `` tag) based on the following rules

* Table will have `n` columns (based on the amount of elements in `columns-def` vector

* The columns will be rendered in the same order, as in `columns-def` vector

* For each item in subscription, datatable will render a row, each cell of which will correspond to the value of a particular property in the item's map (datatable uses `get-in item column-key` based on `columns-def`)

* For every action, that changes the state of datatable (sorting, pagination) it will re-calculate what should be rendered and apply it on top of provided data subscription

## License

Copyright © 2016 Kirill Ishanov

Distributed under the Eclipse Public License either version 1.0 or (at

your option) any later version.