Cards

`<CardExportForm>`

==TODO==

==TODO==

==TODO==

==TODO==

See Creating Index Pages for an introduction.

Props:

The most common props are:

rows (Array - required) - An array of objects - one per row.
title (String) - A title to display in the card header.
primary (Boolean) - Makes the title bold. This should be used on the first (primary) card on each page, which should have the page title as its title.

For use with bulk actions:

Other props specific to <CardTable> are:

align-with-cards (Boolean) - Extra padding is added to the left/right cells to make the text line up with the card header. Good for dashboards.
empty-body-class (String, Array, Object) - Classes to add to the card-body div if the table is empty.
id-field (String) - The field on each row that contains the row ID. Each row must have a unique ID. Defaults to 'id'.
no-hover (Boolean) - Disables the hover effect. Not generally recommended.
responsive (Boolean) - Makes tables scroll horizontally on small screens. (Note: It is generally better to hide low priority columns instead.)
row-class (String, Array, Object, Function) - Classes to add to each row. If this is a function, it is called with the row object as its only parameter, and the returned string/array/object is used as the class. Defaults to 'show-on-hover-container' so the buttons are displayed on hover.

These props are inherited from <CardSimple>:

body-class (String, Array, Object) - Classes to add to the card-body div. The default is p-0 so the table sits flush against the edges. Also see empty-body-class above.
footer-class (String, Array, Object) - Classes to add to the card-footer element, if enabled (see the #footer slot).
footer-href (String) - Turns the whole footer into a link to the specified URL. May be an internal or external link. Good for dashboards.
header-class (String, Array, Object) - Classes to add to the card-header element, if enabled (see the title prop and the #header & #buttons slots).
header-href (String) - Turns the whole header into a link to the specified URL. May be an internal or external link. Good for dashboards.
stretch (Boolean) - The card height is stretched to fill the available space - e.g. equal to the biggest card in the grid row. Note: This looks slightly odd when used with <CardTable>, so it should normally be disabled.

Slots:

The commonly used slots are:

#headings - Should contain the <th> heading cells.
#heading-buttons - May contain buttons such as <ButtonNew> to go at the end of the headings row.
#row="{ row }" - Should contain the <td> cells for each row.
#row-buttons="{ row }" - May contain buttons such as <ButtonView> to go at the end of each row.
#empty - Content to display if there are no rows. Defaults to No records found..
#empty-buttons - Buttons to display below the content if there are no rows, such as <ButtonNew> and <ButtonClearSearch>.
#bulk-actions - Buttons to display when one or more rows are checked. Also set the with-bulk-actions prop.
#bulk-actions-label - A label to display to the left of the bulk actions buttons. e.g. {{ selectedRowIds.length }} row(s) selected.

The more advanced slots are:

#thead-start - Additional <tr> rows to go at the start of the <thead>
#thead-end - Additional <tr> rows to go at the end of the <thead>
#tbody-start - Additional <tr> rows to go at the start of the <tbody>
#tbody-end - Additional <tr> rows to go at the end of the <tbody>
default - Additional content to go at the end of the <table>, e.g. <tfoot>. Can also be used as an alternative to #row if you want to build the <tbody> manually (but then you can't use bulk actions).

These slots are inherited from <CardSimple>:

#buttons - Buttons to display to the right of the title. They should all be small (btn-sm) with ml-1 space between them.
#header - Content to display in the card header. May be used as an alternative to the title prop.
#footer - Content to display in the card footer.

Events: None.