(bottom-left-content bottom-left-renderer column-footer-height parts)
Render section 3 - the content component
Render section 3 - the content component
(bottom-right-content bottom-right-renderer column-footer-height parts)
Render section 9 - the content component
Render section 9 - the content component
(column-footer-content column-footer-renderer scroll-x parts)
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:
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 column-footer-renderer
scroll-x
row-viewport-width
column-footer-height
parts
class
style
attr
content-class
content-style
content-attr)
Render section 6 - the viewport component (which renders the content component as its child)
Render section 6 - the viewport component (which renders the content component as its child)
(column-header-content column-header-renderer scroll-x parts)
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:
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 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
parts)
Render section 4 - the viewport component (which renders the content component as its child)
Render section 4 - the viewport component (which renders the content component as its child)
(row-content row-renderer key-fn top-row-index rows scroll-x scroll-y parts)
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:
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 row-footer-renderer
key-fn
top-row-index
rows
scroll-y
cmerger)
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:
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 row-footer-renderer
key-fn
top-row-index
rows
scroll-y
row-viewport-height
content-rows-height
parts)
Render section 8 - the viewport component (which renders the content component as its child)
Render section 8 - the viewport component (which renders the content component as its child)
(row-header-content row-header-renderer
key-fn
top-row-index
rows
scroll-y
parts)
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:
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 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
parts)
Render section 2 - the viewport component (which renders the content component as its child)
Render section 2 - the viewport component (which renders the content component as its child)
(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
parts)
Render section 5 - the viewport component (which renders the content component as its child)
Render section 5 - the viewport component (which renders the content component as its child)
(scrollbar & {:keys [type width on-change] :or {width 10}})
Render a horizontal or vertical scrollbar
Arguments:
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
(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))
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 top-left-renderer column-header-height parts)
Render section 1 - the content component
Render section 1 - the content component
(top-right-content top-right-renderer column-header-height parts)
Render section 7 - the content component
Render section 7 - the content component
(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:
Each container section holds 'sections' which are numbered:
+-----+---------+-----+ | 1 | 4 | 7 | +-----+---------+-----+-+ | | | | | | 2 | 5 | 8 |VS | | | | | +-----+---------+-----+ + | 3 | 6 | 9 | +-----+---------+-----+ +---HS----+
The nine 'sections' are named:
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
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
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close