re-com.v-table — org.clojars.jbiserkov/re-com 2.13.3

bottom-left-content cljs

(bottom-left-content bottom-left-renderer column-footer-height class style attr)

Render section 3 - the content component

bottom-right-content cljs

(bottom-right-content bottom-right-renderer
                      column-footer-height
                      class
                      style
                      attr)

Render section 9 - the content component

column-footer-content cljs

(column-footer-content column-footer-renderer scroll-x class style attr)

The column-footer section 'content' component. Takes a function that renders column-footers and draws all of them in section 6 (sections explained below). This component is also responsible for setting the horizontal scroll position of this section based on scroll-x

Arguments:

• column-footer-renderer function that knows how to render column-footers
• scroll-x current horizontal scrollbar position in px

column-footer-viewport cljs

(column-footer-viewport column-footer-renderer
                        scroll-x
                        row-viewport-width
                        column-footer-height
                        class
                        style
                        attr
                        content-class
                        content-style
                        content-attr)

Render section 6 - the viewport component (which renders the content component as its child)

column-header-content cljs

(column-header-content column-header-renderer scroll-x class style attr)

The column-header section 'content' component. Takes a function that renders column-headers and draws all of them in section 4 (sections explained below). This component is also responsible for setting the horizontal scroll position of this section based on scroll-x

Arguments:

• column-header-renderer function that knows how to render column-headers
• scroll-x current horizontal scrollbar position in px

column-header-viewport cljs

(column-header-viewport column-header-renderer
                        scroll-x
                        column-header-selection-fn
                        [selection-renderer on-mouse-down on-mouse-enter
                         on-mouse-leave]
                        selection-allowed?
                        row-viewport-width
                        column-header-height
                        content-rows-width
                        class
                        style
                        attr
                        sel-class
                        sel-style
                        sel-attr
                        content-class
                        content-style
                        content-attr)

Render section 4 - the viewport component (which renders the content component as its child)

px cljs

row-content cljs

(row-content row-renderer
             key-fn
             top-row-index
             rows
             scroll-x
             scroll-y
             class
             style
             attr)

The rows section 'content' component. Takes a function that renders rows and draws all of them in section 5 (sections explained below). When in virtual? mode, only a screen-full of rows are passed to this component at any one time. This component is also responsible for setting the horizontal and vertical scroll position of this section based on scroll-x and scroll-y

Arguments:

• row-renderer function that knows how to render rows (will be passed the 0-based row-index and row to render)
• key-fn function/keyword that returns a unique id out of the row map/object, or nil to use the row's 0-based row-index
• top-row-index the 0-based index of the row that is currently at the top of the viewport (for virtual mode)
• rows a vector of row maps (or objects) to render
• scroll-x current horizontal scrollbar position in px
• scroll-y current horizontal scrollbar position in px

row-footer-content cljs

(row-footer-content row-footer-renderer
                    key-fn
                    top-row-index
                    rows
                    scroll-y
                    class
                    style
                    attr)

The row-footer section 'content' component. Takes a function that renders row-footers and draws all of them in section 8 (sections explained below). When in virtual? mode, only a screen-full of row-footers are passed to this component at any one time. This component is also responsible for setting the vertical scroll position of this section based on scroll-y

Arguments:

• row-footer-renderer function that knows how to render row-footers (will be passed the 0-based row-index and row to get the data from)
• key-fn function/keyword that returns a unique id out of the row map/object, or nil to use the row's 0-based row-index
• top-row-index the 0-based index of the row that is currently at the top of the viewport (for virtual mode)
• rows a vector of row maps (or objects) to render the row-footers from
• scroll-y current horizontal scrollbar position in px

row-footer-viewport cljs

(row-footer-viewport row-footer-renderer
                     key-fn
                     top-row-index
                     rows
                     scroll-y
                     row-viewport-height
                     content-rows-height
                     class
                     style
                     attr
                     content-class
                     content-style
                     content-attr)

Render section 8 - the viewport component (which renders the content component as its child)

row-header-content cljs

(row-header-content row-header-renderer
                    key-fn
                    top-row-index
                    rows
                    scroll-y
                    class
                    style
                    attr)

The row-header section 'content' component. Takes a function that renders row-headers and draws all of them in section 2 (sections explained below). When in virtual? mode, only a screen-full of row-headers are passed to this component at any one time. This component is also responsible for setting the vertical scroll position of this section based on scroll-y

Arguments:

• row-header-renderer function that knows how to render row-headers (will be passed the 0-based row-index and row to get the data from)
• key-fn function/keyword that returns a unique id out of the row map/object, or nil to use the row's 0-based row-index
• top-row-index the 0-based index of the row that is currently at the top of the viewport (for virtual mode)
• rows a vector of row maps (or objects) to render the row-headers from
• scroll-y current horizontal scrollbar position in px

row-header-viewport cljs

(row-header-viewport row-header-renderer
                     key-fn
                     top-row-index
                     rows
                     scroll-y
                     row-header-selection-fn
                     [selection-renderer on-mouse-down on-mouse-enter
                      on-mouse-leave]
                     selection-allowed?
                     row-viewport-height
                     content-rows-height
                     class
                     style
                     attr
                     sel-class
                     sel-style
                     sel-attr
                     content-class
                     content-style
                     content-attr)

Render section 2 - the viewport component (which renders the content component as its child)

row-viewport cljs

(row-viewport row-renderer
              key-fn
              top-row-index
              rows
              scroll-x
              scroll-y
              row-selection-fn
              [selection-renderer on-mouse-down on-mouse-enter on-mouse-leave]
              selection-allowed?
              row-viewport-height
              row-viewport-width
              row-viewport-id
              content-rows-height
              content-rows-width
              class
              style
              attr
              sel-class
              sel-style
              sel-attr
              content-class
              content-style
              content-attr)

Render section 5 - the viewport component (which renders the content component as its child)

scrollbar cljs

(scrollbar & {:keys [type width on-change] :or {width 10}})

Render a horizontal or vertical scrollbar

Arguments:

• type [keyword] scrollbar type (:horizontal or :vertical)
• length [number] px size of the long edge. If not specified, scrollbar will fill space provided
• width [optional number, default = 10] px size of the short edge
• content-length [number] px length of the content this scrollbar will be in charge of
• scroll-pos [number] current px scroll position for the beginning of the scrollbar 'thumb'
• on-change [fn] called every time the thumb is dragged. Args: new-scroll-pos
• style [map] CSS style map

scrollbar-margin cljs

scrollbar-thickness cljs

scrollbar-tot-thick cljs

show-row-data-on-alt-click cljs

(show-row-data-on-alt-click row row-index event)

Make a call to this function in the click event of your row renderer, then every time they Alt+Click on a row, The raw cljs object used to render that row will be popped into DevTools :-) Here is what the line might look like: :on-click (handler-fn (v-table/show-row-data-on-alt-click row row-index event))

top-left-content cljs

(top-left-content top-left-renderer column-header-height class style attr)

Render section 1 - the content component

top-right-content cljs

(top-right-content top-right-renderer column-header-height class style attr)

Render section 7 - the content component

v-table cljs

(v-table &
         {:keys [model virtual? row-height row-viewport-width
                 row-viewport-height max-row-viewport-height src]
          :or {virtual? true}
          :as args})

Renders a scrollable table with optional fixed column and row headers and footers, totalling nine addressable sections By default, it only displays rows that are visible, so is very efficient for large data structures The table supports click+drag selections within the rows section (5), row header section (2) and col header section (4)

The table is laid out using an h-box for the outer component, with four v-box 'container sections' sitting next to each other:

+-----+---------+-----+-+ | | | | | | | | | | | | | | | |LEFT | MIDDLE |RIGHT|VS | | | | | | | | | | | | | | | |- - -|- - - - -|- - -|-| +-----+---HS----+-----+-+

The four 'container section' v-boxes are named:

• LEFT: contains the row headers (and corresponding two corner sections)
• MIDDLE: contains the main content area (the rows), along with column headers and footers and the horizontal scrollbar (HS)
• RIGHT: contains the row footers (and corresponding two corner sections)
• VS: contains the vertical scrollbar

Each container section holds 'sections' which are numbered:

+-----+---------+-----+ | 1 | 4 | 7 | +-----+---------+-----+-+ | | | | | | 2 | 5 | 8 |VS | | | | | +-----+---------+-----+ + | 3 | 6 | 9 | +-----+---------+-----+ +---HS----+

The nine 'sections' are named:

• 1: top-left
• 2: row-headers
• 3: bottom-left
• 4: column-headers
• 5: rows
• 6: column-footers
• 7: top-right
• 8: row-footers
• 9: bottom-right

The corner sections (1, 3, 7, 9) are fixed (i.e. do not scroll) and consist of a single 'content' area

The other sections are scrollable: (2, 8) vertical, (4, 6) horizontal and (5) vertical & horizontal as a 'viewport' onto their (potentially larger) 'content' area

Arguments:

• model [mandatory atom containing vector of maps (or other data structures)] The data to be displayed, consisting of rows. Each row is normally a map but could be anything) Rows MUST contain a unique id (specified via :key-fn arg) They are passed to the row-renderer (section 5), row-header-renderer (section 2) and row-footer-renderer (section 8) NOTE: data for sections 1, 3, 4, 6, 7 and 9 are not included in model

• key-fn [optional fn or keyword to extract a unique id from the row data, or not specified/nil to indicate that v-table should use the internally generated 0-based row-id] A row is passed to key-fn and it returns the unique identifier for that row

• virtual? [optional bool, default = true] When true, use virtual feature where only a screen-full (viewport) of rows are rendered at any one time Use true for tables with many rows to reduce initialisation time and resource usage You can use false for smaller tables to improve performance of vertical scrolling

• remove-empty-row-space? [optional bool, default = true] Specifies whether to remove empty row space (the space between the last row and the horizontal scrollbar) for small tables that don't fill the space available to the v-table This will cause the horizontal scrollbar section to be nestled against the last row, and whatever is underneath the v-table to be brought up with it

• max-width [optional string, default = nil (table will fill available space)] MAXIMUM width of the entire v-table NOTE: This is specified as a normal CSS value, e.g. "1024px" or "90%"

  ========== SECTION 1 - top-left

• top-left-renderer [optional (fn [])] Render the top left section Height is determined by the :column-header-height arg Width is determined by the component itself Passed args: none

  ========== SECTION 2 - row-headers

• row-header-renderer [optional (fn [row-index row])] Render a single row header Height is determined by the row-height arg Width is determined by the component itself Passed args: row-index (0-based), row (a map, or other data structure from model)

• row-header-selection-fn [optional (fn [selection-event coords ctrlKey shiftKey event])] If provided, indicates that the row header section is selectable via click+drag Passed args: see row-selection-fn below for details Use the :row-header-selection-rect style-part to style the selection rectangle

  ========== SECTION 3 - bottom-left

• bottom-left-renderer [optional (fn [])] Render the bottom left section Height is determined by the column-footer-height arg Width is determined by the component itself Passed args: none

                       NOTE: The width of the LEFT container section (encompassing sections 1, 2 and 3 above)
                             is determined by the widest section
  

  ========== SECTION 4 - column-headers

• column-header-renderer [optional (fn [])] Render the entire column header Height is determined by the column-header-height arg Width is determined by the width available to the v-table OR the row-viewport-width arg if specified Passed args: none

• column-header-height [optional number, default = 0] px height of the column header section

• column-header-selection-fn [optional (fn [selection-event coords ctrlKey shiftKey event])] if provided, indicates that the column header section is selectable via click+drag Passed args: see row-selection-fn below for details Use the :column-header-selection-rect style-part to style the selection rectangle

  ========== SECTION 5 - rows (main content area)

• row-renderer [mandatory (fn [row-index row])] Render a single content row [DJ] Wants to state that columns are not virtual and all horizontal content is rendered Height is determined by the row-height arg Width is determined by the width available to the v-table OR the row-viewport-width arg if specified Passed args: row-index (0-based), row (a map, or other data structure from model)

• row-height [mandatory number] px height of each row

• row-content-width [mandatory number] px width of the content rendered by row-renderer

• row-viewport-width [optional number, default = nil (take up all available width)] px width of the row viewport area If not specified, takes up all width available to it

• row-viewport-height [optional number, default = nil (take up all available height)] px height of the row viewport area If not specified, takes up all height available to it

• max-row-viewport-height [optional number, default = nil (determined by parent height and number of rows)] MAXIMUM px height of the row viewport area Conveniently excludes height of col header and footer and horizontal scrollbar For this to be effective, the parent of the v-table component should have ':size none'

• row-selection-fn [optional (fn [selection-event coords ctrlKey shiftKey event])] If provided, indicates that the row section is selectable via click+drag The fn will be called (on mouse-down, mouse-move and mouse-up) with four positional args Passed args: selection-event: One of :selection-start, :selecting or :selection-end coords: {:start-row integer ;; rows are returned as zero-based row numbers (except column-header which returns px) :end-row integer :start-col integer ;; cols are returned as px offsets :end-col integer} ctrlKey: When true, Control key is currently pressed shiftKey: When true, Shift key is currently pressed event The original MouseEvent (https://developer.mozilla.org/en/docs/Web/API/MouseEvent) Use the :selection-rect style-part to style the selection rectangle

  ========== SECTION 6 - column-footers

• column-footer-renderer [optional (fn [])] Render the entire column footer Height is determined by the column-footer-height arg Width is determined by the width available to the v-table OR the row-viewport-width arg if specified Passed args: none

• column-footer-height [optional number, default = 0] px height of the column footer section

  ========== SECTION 7 - top right

• top-right-renderer [optional (fn [])] Render the top right section Height is determined by the column-header-height arg Width is determined by the component itself Passed args: none

  ========== SECTION 8 - row-footers

• row-footer-renderer [optional (fn [row-index row])] Render a single row footer Height is determined by the row-height arg Width is determined by the component itself Passed args: row-index (0-based), row (a map, or other data structure from model)

  ========== SECTION 9 - bottom-right

• bottom-right-renderer [optional (fn [])] Render the bottom right section Height is determined by the column-footer-height arg Width is determined by the component itself Passed args: none

                       NOTE: The width of the RIGHT container section (encompassing sections 7, 8 and 9 above)
                             is determined by the widest section
  

  ========== Scrolling the table so that a block of rows/columns become visible

• scroll-rows-into-view [optional atom map] Set this argument to scroll the table to a particular row range map example: {:start-row 12 ;; Start row number (zero-based) to be scrolled into view :end-row 14} ;; End row number to be scrolled into view

• scroll-columns-into-view [optional atom map] Set this argument to scroll the table to a particular column range (in this case columns are pixels!) map example: {:start-col 200 ;; Start column px offset to be scrolled into view :end-col 300} ;; End column px offset to be scrolled into view

  ========== Styling different parts of the table (and setting attributes for those parts)

• class Add extra class(es) to the outer container

• parts [optional nested map] Allows classes, styles and attributes (e.g. custom event handlers) to be specified for each part of the table

                       Keys can be:
  
                        - :wrapper                             The outer container of the table
  
                        - :left-section                        The left v-box container section of the table, containing:
                           - :top-left                         Top left section (1)
                           - :row-headers                      Row header viewport section (2)
                              - :row-header-selection-rect     The row-header rectangle used for click+drag selection of row headers
                              - :row-header-content            The v-box containing one row header (row-header-render renders in here)
                           - :bottom-left                      Bottom left section (3)
  
                        - :middle-section                      The middle v-box container section of the table, containing:
                           - :column-headers                   Column header viewport section (4)
                              - :column-header-selection-rect  The column-header rectangle used for click+drag selection of column headers
                              - :column-header-content         The box containing the column header (column-header-render renders in here)
                           - :rows                             Main row viewport section (5)
                              - :row-selection-rect            The ROW rectangle used for click+drag selection of rows
                                                               Defaults to being above the rows (:z-index 1). Set to 0 to place it underneath rows
                              - :row-content                   The v-box containing one row (row-render renders in here)
                           - :column-footers                   Column footer viewport section (6)
                              - :column-footer-content         The box containing the column footer (column-footer-render renders in here)
                           - :h-scroll                         The horizontal scrollbar
  
                        - :right-section                       The right container section v-box of the table, containing:
                           - :top-right                        Top right section (7)
                           - :row-footers                      Row footer viewport section (8)
                              - :row-footer-content            The v-box containing one row footer (row-footer-render renders in here)
                           - :bottom-right                     Bottom right section (9)
  
                        - :v-scroll-section                    The v-box containing the vertical scrollbar:
                           - :v-scroll                         The vertical scrollbar
  

v-table-args-desc cljs

v-table-parts cljs

v-table-parts-desc cljs