AisTable
This component is for displaying tabular data. It supports pagination, filtering, sorting, custom rendering, various style options, events and asynchronous data.
Items (record data)
The items prop is an array of objects that is used to create the tbody rows of your AisTable. Example format:
const items = [
{ "id": 7032,"hawkId": "cyepiskov0", "univId": "00549444", "firstName": "Chancey", "lastName": "Yepiskov", "fullName": "Chancey Yepiskov", "email": "chancey-yepiskov@uiowa.edu", "hireDate": "05/09/1990", "retired": false,"inactive": true },
{ "id": 2701,"hawkId": "beyden1", "univId": "00120802", "firstName": "Beaufort", "lastName": "Eyden", "fullName": "Beaufort Eyden", "email": "beaufort-eyden@uiowa.edu", "hireDate": "06/05/1998", "retired": false,"inactive": false },
{ "id": 9380,"hawkId": "fstokey2", "univId": "00341804", "firstName": "Franky", "lastName": "Stokey", "fullName": "Franky Stokey", "email": "franky-stokey@uiowa.edu", "hireDate": "06/11/1993", "retired": false,"inactive": true },
{ "id": 8167,"hawkId": "mloisi3", "univId": "00769787", "firstName": "Maximilien", "lastName": "Loisi", "fullName": "Maximilien Loisi", "email": "maximilien-loisi@uiowa.edu", "hireDate": "01/02/1996", "retired": false,"inactive": false },
{ "id": 3167,"hawkId": "ckunkler4", "univId": "00580573", "firstName": "Cyrillus", "lastName": "Kunkler", "fullName": "Cyrillus Kunkler", "email": "cyrillus-kunkler@uiowa.edu", "hireDate": "06/30/1990", "retired": false,"inactive": false },
{ "id": 7137,"hawkId": "nroggerone5", "univId": "00815761", "firstName": "Noella", "lastName": "Roggerone", "fullName": "Noella Roggerone", "email": "noella-roggerone@uiowa.edu", "hireDate": "03/08/1990", "retired": false,"inactive": true },
{ "id": 7477,"hawkId": "tmcnamara6", "univId": "00198639", "firstName": "Tannie", "lastName": "McNamara", "fullName": "Tannie McNamara", "email": "tannie-mcnamara@uiowa.edu", "hireDate": "12/26/2000", "retired": true,"inactive": true },
{ "id": 8112,"hawkId": "csneesby7", "univId": "00846913", "firstName": "Cherlyn", "lastName": "Sneesby", "fullName": "Cherlyn Sneesby", "email": "cherlyn-sneesby@uiowa.edu", "hireDate": "09/20/2020", "retired": false,"inactive": false },
{ "id": 5702,"hawkId": "lcouves8", "univId": "00541147", "firstName": "Linnell", "lastName": "Couves", "fullName": "Linnell Couves", "email": "linnell-couves@uiowa.edu", "hireDate": "05/28/1997", "retired": false,"inactive": true },
{ "id": 8338,"hawkId": "gtinniswood9", "univId": "00053635", "firstName": "Gerrard", "lastName": "Tinniswood", "fullName": "Gerrard Tinniswood", "email": "gerrard-tinniswood@uiowa.edu", "hireDate": "11/25/2020", "retired": true,"inactive": true },
]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Fields (column definitions)
The fields prop is for specifying the table column headings, and in which order the columns of data are displayed. The field object keys are used to extract the value from each item (record) row, and to provide additional features such as enabling sorting on the column, etc. Example format:
const fields = [
{ key: 'id', label: 'Hawk ID', sortable: true },
{ key: 'hawkId', label: 'Hawk ID', sortable: true },
{ key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center' },
{ key: 'firstName', label: 'First Name', sortable: true },
{ key: 'lastName', label: 'Last Name', sortable: true },
{ key: 'fullName', label: 'Full Name', sortable: true },
{ key: 'email', label: 'Email', sortable: true, class: 'whitespace-nowrap' },
{ key: 'hireDate', label: 'Hire Date', sortable: true, class: 'text-center whitespace-nowrap' },
{ key: 'retired', label: 'Retired', sortable: true, class: 'text-center' },
{ key: 'inactive', label: 'Inactive', sortable: true, class: 'text-center' },
]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Field definition reference
The following field properties are recognized:
Property | Type | Description |
|---|---|---|
| key | String | required The key for selecting data from each object in the items array. See custom rendering to see more places that this field key is used. |
| label | String | Appears in the columns table header (and footer if foot-clone is set). |
| class | String or Array | These classes will be added to all th and td tags, in the header, body, and footer, for that column. |
| sortable | Boolean | Enable sorting on this column. Refer to the Sorting section for more details. |
| icon | String or Object | Easily insert an icon into your thead or tfoot header. Supports string for core icons and Object for other FontAwesome Icons |
| formatter | String or Function | A formatter callback function or name of a method in your component, can be used instead of (or in conjunction with) scoped field slots. The formatter will be called with the syntax formatter(value, key, item). Refer to Custom Data Rendering for more details. |
| sortByFormatted | Boolean | Sort the column by the result of the field's formatter when set to true. Default is false. Boolean has no effect if the field does not have a formatter. |
| filterByFormatted | Boolean | Filter the column by the result of the field's formatter when set to true. Default is false. Boolean has no effect if the field does not have a formatter. |
| tdClass | String or Array or Function | These classes will be added to all td tags in the tbody for that column. If custom classes per cell are required, a callback function can be specified instead. The function will be called as tdClass(value, key, item) and it must return an Array or String. |
| thClass | String or Array | These classes will be added to all th tags in the thead/tfoot for that column. |
| tdAttr | Object or Function | JavaScript object representing additional attributes to apply to the tbody field td cell. If custom attributes per cell are required, a callback function can be specified instead. The function will be called as tdAttr(value, key, item) and it must return an Object. |
| sortFormatter | String or Function | This functions the same as formatter, but is only used for sorting. |
| filter | Boolean | Enable column filter on this column. Refer to Filtering section for more details |
| dateFilter | Boolean | Enable date column filter on this column. Refer to Filtering section for more details |
Basic Table
Basic table with default styling.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
Styles
There are several props provided to alter the style of the table. Here are some of the basic styles:
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
Sorting
As mentioned in the Fields section above, you can make columns sortable. Clicking on a sortable column header will sort the column in ascending direction (smallest to largest), while clicking on it again will switch the direction of sorting to descending (largest to smallest). Clicking a third time will reset the sorting to the default sorting passed-in to the table. To sort by multiple fields, hold either the ctrl, shift or command key while selecting the fields to sort by. You can sort by as many fields as you would like.
The sort-by prop is what controls the initial, default sorting for the table. sort-by accepts an array of fields. The data will be sorted in the order the fields are listed in this array. To sort a field in a descending direction, place a - before the field name. In this example, sort-by=['lastName', '-firstName'], so the data will first be sorted ascending by lastName and then descending by firstName.
To manually execute this sorting, you would first click the lastName field, then press and hold the ctrl, shift or command key while clicking twice on the firstName field.
By default, null values sort last when sorting. Use the sort-nulls-first boolean prop to have null values show first.
Hawk ID | Univ ID | First Name 2 | Last Name 1 | Email | Hire Date |
|---|---|---|---|---|---|
| scooper3 | 01133454 | Steve | Cooper | steve-cooper@uiowa.edu | 01/09/2010 |
| jcooper11 | 00549444 | John | Cooper | john-cooper@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
Pagination
Table supports built in pagination of item data. You can control how many rows are displayed at a time by setting the per-page prop to the maximum number of rows you would like displayed. Use the current-page prop to specify which page to display (starting from page 1). You can use the AisPagination component in conjunction with this AisTable component for providing control over pagination.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
| nroggerone5 | 00815761 | Noella | Roggerone | noella-roggerone@uiowa.edu | 03/08/1990 |
| tmcnamara6 | 00198639 | Tannie | McNamara | tannie-mcnamara@uiowa.edu | 12/26/2000 |
| csneesby7 | 00846913 | Cherlyn | Sneesby | cherlyn-sneesby@uiowa.edu | 09/20/2020 |
| lcouves8 | 00541147 | Linnell | Couves | linnell-couves@uiowa.edu | 05/28/1997 |
| gtinniswood9 | 00053635 | Gerrard | Tinniswood | gerrard-tinniswood@uiowa.edu | 11/25/2020 |
Sticky Headers
Use the sticky-header prop to enable a vertically scrolling table with headers that remain fixed (sticky) as the table body scrolls. By default, the headers will stick to the top (and footers to the bottom, if visible) of the page.
Use prop sticky-top to account for a fixed header. In this example, sticky-top="top-[57px]" is used to make the table headers stick at the bottom of the fixed application header (which has a height of 57px). The default is top-0 which results in the table headers sticking to the very top of the page.
For the footer, use prop sticky-bottom if you have to adjust for a fixed application/page footer. The default is bottom-0.
Stick to Page
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
| nroggerone5 | 00815761 | Noella | Roggerone | noella-roggerone@uiowa.edu | 03/08/1990 |
| tmcnamara6 | 00198639 | Tannie | McNamara | tannie-mcnamara@uiowa.edu | 12/26/2000 |
| csneesby7 | 00846913 | Cherlyn | Sneesby | cherlyn-sneesby@uiowa.edu | 09/20/2020 |
| lcouves8 | 00541147 | Linnell | Couves | linnell-couves@uiowa.edu | 05/28/1997 |
| gtinniswood9 | 00053635 | Gerrard | Tinniswood | gerrard-tinniswood@uiowa.edu | 11/25/2020 |
| ceassona | 00934477 | Cara | Easson | cara-easson@uiowa.edu | 02/15/1997 |
| dseczykb | 00403077 | Dur | Seczyk | dur-seczyk@uiowa.edu | 07/31/1996 |
| bstalleyc | 00572461 | Bevin | Stalley | bevin-stalley@uiowa.edu | 11/17/1994 |
| ebernhardssond | 00633707 | Evaleen | Bernhardsson | evaleen-bernhardsson@uiowa.edu | 03/21/1990 |
| mponcete | 00004601 | Michail | Poncet | michail-poncet@uiowa.edu | 11/18/2019 |
| mhartiganf | 00316331 | Mac | Hartigan | mac-hartigan@uiowa.edu | 03/01/1991 |
| hpawelekg | 00214424 | Hesther | Pawelek | hesther-pawelek@uiowa.edu | 11/25/2002 |
| atuteh | 00167917 | Arlan | Tute | arlan-tute@uiowa.edu | 04/30/2018 |
| jcornbilli | 00337376 | Joana | Cornbill | joana-cornbill@uiowa.edu | 10/02/2001 |
| mfeelyj | 00441189 | Meredith | Feely | meredith-feely@uiowa.edu | 05/01/2019 |
| gdowk | 00093302 | Gabi | Dow | gabi-dow@uiowa.edu | 08/19/2008 |
| bandragl | 00180957 | Burl | Andrag | burl-andrag@uiowa.edu | 04/06/1991 |
| ewyndhamm | 00465889 | Emanuel | Wyndham | emanuel-wyndham@uiowa.edu | 04/15/2015 |
| atschirschkyn | 00471829 | Alisa | Tschirschky | alisa-tschirschky@uiowa.edu | 04/06/1995 |
| emarklino | 00111055 | Edin | Marklin | edin-marklin@uiowa.edu | 07/16/1993 |
| pinottp | 00549245 | Porty | Inott | porty-inott@uiowa.edu | 06/19/1991 |
| hgawithq | 00752282 | Huntley | Gawith | huntley-gawith@uiowa.edu | 01/05/2016 |
| msellimanr | 00569992 | Mikel | Selliman | mikel-selliman@uiowa.edu | 04/20/2020 |
| mramsiers | 00679501 | Marilyn | Ramsier | marilyn-ramsier@uiowa.edu | 03/22/2004 |
| kheggisont | 00151064 | Ken | Heggison | ken-heggison@uiowa.edu | 02/22/1993 |
| ftodeou | 00355900 | Freddy | Todeo | freddy-todeo@uiowa.edu | 07/16/1991 |
| wbaggotv | 00949758 | Wells | Baggot | wells-baggot@uiowa.edu | 02/06/2007 |
| shaughw | 00587247 | Sascha | Haugh | sascha-haugh@uiowa.edu | 03/26/1994 |
| nluebbertx | 00846605 | Natalya | Luebbert | natalya-luebbert@uiowa.edu | 12/21/1993 |
| cbelfragey | 00624156 | Chrysa | Belfrage | chrysa-belfrage@uiowa.edu | 03/14/2009 |
| rqualtroz | 00857855 | Ruggiero | Qualtro | ruggiero-qualtro@uiowa.edu | 08/07/2004 |
| fbird10 | 00409574 | Frank | Bird | frank-bird@uiowa.edu | 11/10/2015 |
| mschachter11 | 00166832 | Margery | Schachter | margery-schachter@uiowa.edu | 05/26/1990 |
| dlauderdale12 | 00792283 | Dennie | Lauderdale | dennie-lauderdale@uiowa.edu | 02/24/1999 |
| tscoates13 | 00217643 | Tresa | Scoates | tresa-scoates@uiowa.edu | 02/21/2015 |
| lbarmby14 | 00782331 | Leonora | Barmby | leonora-barmby@uiowa.edu | 06/22/2018 |
| jantonomoli15 | 00403864 | Joseito | Antonomoli | joseito-antonomoli@uiowa.edu | 03/14/2014 |
| kkeyme16 | 00164961 | Krissy | Keyme | krissy-keyme@uiowa.edu | 11/28/2001 |
| hphilipot17 | 00980816 | Ham | Philipot | ham-philipot@uiowa.edu | 05/19/2007 |
| mmattei18 | 00615865 | Micaela | Mattei | micaela-mattei@uiowa.edu | 01/14/2001 |
| wstollenhof19 | 00829399 | Wells | Stollenhof | wells-stollenhof@uiowa.edu | 01/19/2005 |
| pstainer1a | 00823585 | Patrizia | Stainer | patrizia-stainer@uiowa.edu | 09/23/1996 |
| gscorey1b | 00166860 | Gray | Scorey | gray-scorey@uiowa.edu | 03/31/1994 |
| jkinghorn1c | 00579953 | Janetta | Kinghorn | janetta-kinghorn@uiowa.edu | 12/31/1994 |
| fmorfey1d | 00022499 | Florina | Morfey | florina-morfey@uiowa.edu | 04/10/2003 |
| rcampbell1e | 00310438 | Rodge | Campbell | rodge-campbell@uiowa.edu | 12/21/2010 |
| chaysey1f | 00691254 | Celinda | Haysey | celinda-haysey@uiowa.edu | 01/09/2003 |
| vapplin1g | 00427255 | Vivienne | Applin | vivienne-applin@uiowa.edu | 09/01/2008 |
| mbernholt1h | 00471504 | Mattheus | Bernholt | mattheus-bernholt@uiowa.edu | 03/15/2005 |
| norviss1i | 00323354 | Nerti | Orviss | nerti-orviss@uiowa.edu | 12/14/2008 |
| jbondar1j | 00184441 | Joshia | Bondar | joshia-bondar@uiowa.edu | 10/02/2005 |
| fravelus1k | 00521656 | Faydra | Ravelus | faydra-ravelus@uiowa.edu | 06/01/1998 |
| wspratt1l | 00709251 | Wynn | Spratt | wynn-spratt@uiowa.edu | 11/28/2021 |
| mcleaton1m | 00007808 | Myrtle | Cleaton | myrtle-cleaton@uiowa.edu | 07/24/1991 |
| dknyvett1n | 00558039 | Daisey | Knyvett | daisey-knyvett@uiowa.edu | 09/25/1994 |
| sdorrian1o | 00908864 | Staford | Dorrian | staford-dorrian@uiowa.edu | 11/18/2006 |
| cle1p | 00843092 | Caye | Le Sarr | caye-le sarr@uiowa.edu | 03/05/2015 |
| nocaine1q | 00241332 | North | O'Caine | north-o'caine@uiowa.edu | 05/07/2018 |
| jniese1r | 00093807 | Janina | Niese | janina-niese@uiowa.edu | 03/18/1997 |
| lhawtry1s | 00676694 | Laura | Hawtry | laura-hawtry@uiowa.edu | 03/15/1994 |
| iplumbe1t | 00219681 | Ive | Plumbe | ive-plumbe@uiowa.edu | 08/16/2015 |
| fkeitch1u | 00327289 | Frederic | Keitch | frederic-keitch@uiowa.edu | 03/28/2015 |
| elalor1v | 00638318 | Elisabetta | Lalor | elisabetta-lalor@uiowa.edu | 04/07/1998 |
| tpyson1w | 00464225 | Tamas | Pyson | tamas-pyson@uiowa.edu | 06/15/2002 |
| gokeefe1x | 00146544 | Gretel | O'Keefe | gretel-o'keefe@uiowa.edu | 01/22/2012 |
| ndrinan1y | 00532978 | Nero | Drinan | nero-drinan@uiowa.edu | 08/04/2017 |
| csplain1z | 00966293 | Cecilla | Splain | cecilla-splain@uiowa.edu | 04/21/2021 |
| apuckett20 | 00895741 | Abie | Puckett | abie-puckett@uiowa.edu | 05/23/2008 |
| felmes21 | 00395781 | Fonz | Elmes | fonz-elmes@uiowa.edu | 01/19/1991 |
| mdeporte22 | 00881930 | Mil | Deporte | mil-deporte@uiowa.edu | 04/05/1995 |
| geastmead23 | 00617432 | Gretta | Eastmead | gretta-eastmead@uiowa.edu | 10/13/1995 |
| wpanas24 | 00045500 | Way | Panas | way-panas@uiowa.edu | 08/09/2017 |
| zbarling25 | 00078128 | Zorina | Barling | zorina-barling@uiowa.edu | 08/16/1998 |
| pbergstram26 | 00375188 | Price | Bergstram | price-bergstram@uiowa.edu | 11/27/2009 |
| fteasdale27 | 00927101 | Fair | Teasdale | fair-teasdale@uiowa.edu | 03/03/1990 |
| bholston28 | 00181238 | Brocky | Holston | brocky-holston@uiowa.edu | 12/15/2018 |
| ewalasik29 | 00751738 | Ermanno | Walasik | ermanno-walasik@uiowa.edu | 06/06/2004 |
| pruxton2a | 00852703 | Pablo | Ruxton | pablo-ruxton@uiowa.edu | 04/28/1991 |
| jcopeman2b | 00819011 | Joe | Copeman | joe-copeman@uiowa.edu | 07/24/2011 |
| rmcshee2c | 00682567 | Robenia | McShee | robenia-mcshee@uiowa.edu | 01/03/1996 |
| adunkinson2d | 00817602 | Annalee | Dunkinson | annalee-dunkinson@uiowa.edu | 04/20/1993 |
| scolquit2e | 00325842 | Sigfrid | Colquit | sigfrid-colquit@uiowa.edu | 10/20/1992 |
| gfrowen2f | 00289843 | Glori | Frowen | glori-frowen@uiowa.edu | 05/29/2013 |
| rsannes2g | 00346699 | Reba | Sannes | reba-sannes@uiowa.edu | 04/26/2017 |
| cheeron2h | 00929705 | Cory | Heeron | cory-heeron@uiowa.edu | 03/14/2004 |
| pkynoch2i | 00874844 | Pace | Kynoch | pace-kynoch@uiowa.edu | 07/11/2015 |
| omarnane2j | 00776460 | Olva | Marnane | olva-marnane@uiowa.edu | 09/18/2003 |
| lreiglar2k | 00533738 | Louie | Reiglar | louie-reiglar@uiowa.edu | 10/29/2018 |
| yvigours2l | 00982156 | Yorker | Vigours | yorker-vigours@uiowa.edu | 06/20/2001 |
| khails2m | 00467737 | Kerr | Hails | kerr-hails@uiowa.edu | 04/26/2016 |
| lmcalpin2n | 00315938 | Lilla | McAlpin | lilla-mcalpin@uiowa.edu | 12/28/1994 |
| amanagh2o | 00765071 | Allina | Managh | allina-managh@uiowa.edu | 07/16/2016 |
| snoddle2p | 00372596 | Skye | Noddle | skye-noddle@uiowa.edu | 06/05/2016 |
| vgirard2q | 00676910 | Vere | Girard | vere-girard@uiowa.edu | 03/23/2016 |
| diapico2r | 00566940 | Delmor | Iapico | delmor-iapico@uiowa.edu | 04/27/2006 |
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
Stick to Container
To set a maximum height on the table, wrap it in a container div with a max-height and overflow. The headers and footers will now stick to the top and bottom of the wrapping container, instead of the page.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
| nroggerone5 | 00815761 | Noella | Roggerone | noella-roggerone@uiowa.edu | 03/08/1990 |
| tmcnamara6 | 00198639 | Tannie | McNamara | tannie-mcnamara@uiowa.edu | 12/26/2000 |
| csneesby7 | 00846913 | Cherlyn | Sneesby | cherlyn-sneesby@uiowa.edu | 09/20/2020 |
| lcouves8 | 00541147 | Linnell | Couves | linnell-couves@uiowa.edu | 05/28/1997 |
| gtinniswood9 | 00053635 | Gerrard | Tinniswood | gerrard-tinniswood@uiowa.edu | 11/25/2020 |
| ceassona | 00934477 | Cara | Easson | cara-easson@uiowa.edu | 02/15/1997 |
| dseczykb | 00403077 | Dur | Seczyk | dur-seczyk@uiowa.edu | 07/31/1996 |
| bstalleyc | 00572461 | Bevin | Stalley | bevin-stalley@uiowa.edu | 11/17/1994 |
| ebernhardssond | 00633707 | Evaleen | Bernhardsson | evaleen-bernhardsson@uiowa.edu | 03/21/1990 |
| mponcete | 00004601 | Michail | Poncet | michail-poncet@uiowa.edu | 11/18/2019 |
| mhartiganf | 00316331 | Mac | Hartigan | mac-hartigan@uiowa.edu | 03/01/1991 |
| hpawelekg | 00214424 | Hesther | Pawelek | hesther-pawelek@uiowa.edu | 11/25/2002 |
| atuteh | 00167917 | Arlan | Tute | arlan-tute@uiowa.edu | 04/30/2018 |
| jcornbilli | 00337376 | Joana | Cornbill | joana-cornbill@uiowa.edu | 10/02/2001 |
| mfeelyj | 00441189 | Meredith | Feely | meredith-feely@uiowa.edu | 05/01/2019 |
| gdowk | 00093302 | Gabi | Dow | gabi-dow@uiowa.edu | 08/19/2008 |
| bandragl | 00180957 | Burl | Andrag | burl-andrag@uiowa.edu | 04/06/1991 |
| ewyndhamm | 00465889 | Emanuel | Wyndham | emanuel-wyndham@uiowa.edu | 04/15/2015 |
| atschirschkyn | 00471829 | Alisa | Tschirschky | alisa-tschirschky@uiowa.edu | 04/06/1995 |
| emarklino | 00111055 | Edin | Marklin | edin-marklin@uiowa.edu | 07/16/1993 |
| pinottp | 00549245 | Porty | Inott | porty-inott@uiowa.edu | 06/19/1991 |
| hgawithq | 00752282 | Huntley | Gawith | huntley-gawith@uiowa.edu | 01/05/2016 |
| msellimanr | 00569992 | Mikel | Selliman | mikel-selliman@uiowa.edu | 04/20/2020 |
| mramsiers | 00679501 | Marilyn | Ramsier | marilyn-ramsier@uiowa.edu | 03/22/2004 |
| kheggisont | 00151064 | Ken | Heggison | ken-heggison@uiowa.edu | 02/22/1993 |
| ftodeou | 00355900 | Freddy | Todeo | freddy-todeo@uiowa.edu | 07/16/1991 |
| wbaggotv | 00949758 | Wells | Baggot | wells-baggot@uiowa.edu | 02/06/2007 |
| shaughw | 00587247 | Sascha | Haugh | sascha-haugh@uiowa.edu | 03/26/1994 |
| nluebbertx | 00846605 | Natalya | Luebbert | natalya-luebbert@uiowa.edu | 12/21/1993 |
| cbelfragey | 00624156 | Chrysa | Belfrage | chrysa-belfrage@uiowa.edu | 03/14/2009 |
| rqualtroz | 00857855 | Ruggiero | Qualtro | ruggiero-qualtro@uiowa.edu | 08/07/2004 |
| fbird10 | 00409574 | Frank | Bird | frank-bird@uiowa.edu | 11/10/2015 |
| mschachter11 | 00166832 | Margery | Schachter | margery-schachter@uiowa.edu | 05/26/1990 |
| dlauderdale12 | 00792283 | Dennie | Lauderdale | dennie-lauderdale@uiowa.edu | 02/24/1999 |
| tscoates13 | 00217643 | Tresa | Scoates | tresa-scoates@uiowa.edu | 02/21/2015 |
| lbarmby14 | 00782331 | Leonora | Barmby | leonora-barmby@uiowa.edu | 06/22/2018 |
| jantonomoli15 | 00403864 | Joseito | Antonomoli | joseito-antonomoli@uiowa.edu | 03/14/2014 |
| kkeyme16 | 00164961 | Krissy | Keyme | krissy-keyme@uiowa.edu | 11/28/2001 |
| hphilipot17 | 00980816 | Ham | Philipot | ham-philipot@uiowa.edu | 05/19/2007 |
| mmattei18 | 00615865 | Micaela | Mattei | micaela-mattei@uiowa.edu | 01/14/2001 |
| wstollenhof19 | 00829399 | Wells | Stollenhof | wells-stollenhof@uiowa.edu | 01/19/2005 |
| pstainer1a | 00823585 | Patrizia | Stainer | patrizia-stainer@uiowa.edu | 09/23/1996 |
| gscorey1b | 00166860 | Gray | Scorey | gray-scorey@uiowa.edu | 03/31/1994 |
| jkinghorn1c | 00579953 | Janetta | Kinghorn | janetta-kinghorn@uiowa.edu | 12/31/1994 |
| fmorfey1d | 00022499 | Florina | Morfey | florina-morfey@uiowa.edu | 04/10/2003 |
| rcampbell1e | 00310438 | Rodge | Campbell | rodge-campbell@uiowa.edu | 12/21/2010 |
| chaysey1f | 00691254 | Celinda | Haysey | celinda-haysey@uiowa.edu | 01/09/2003 |
| vapplin1g | 00427255 | Vivienne | Applin | vivienne-applin@uiowa.edu | 09/01/2008 |
| mbernholt1h | 00471504 | Mattheus | Bernholt | mattheus-bernholt@uiowa.edu | 03/15/2005 |
| norviss1i | 00323354 | Nerti | Orviss | nerti-orviss@uiowa.edu | 12/14/2008 |
| jbondar1j | 00184441 | Joshia | Bondar | joshia-bondar@uiowa.edu | 10/02/2005 |
| fravelus1k | 00521656 | Faydra | Ravelus | faydra-ravelus@uiowa.edu | 06/01/1998 |
| wspratt1l | 00709251 | Wynn | Spratt | wynn-spratt@uiowa.edu | 11/28/2021 |
| mcleaton1m | 00007808 | Myrtle | Cleaton | myrtle-cleaton@uiowa.edu | 07/24/1991 |
| dknyvett1n | 00558039 | Daisey | Knyvett | daisey-knyvett@uiowa.edu | 09/25/1994 |
| sdorrian1o | 00908864 | Staford | Dorrian | staford-dorrian@uiowa.edu | 11/18/2006 |
| cle1p | 00843092 | Caye | Le Sarr | caye-le sarr@uiowa.edu | 03/05/2015 |
| nocaine1q | 00241332 | North | O'Caine | north-o'caine@uiowa.edu | 05/07/2018 |
| jniese1r | 00093807 | Janina | Niese | janina-niese@uiowa.edu | 03/18/1997 |
| lhawtry1s | 00676694 | Laura | Hawtry | laura-hawtry@uiowa.edu | 03/15/1994 |
| iplumbe1t | 00219681 | Ive | Plumbe | ive-plumbe@uiowa.edu | 08/16/2015 |
| fkeitch1u | 00327289 | Frederic | Keitch | frederic-keitch@uiowa.edu | 03/28/2015 |
| elalor1v | 00638318 | Elisabetta | Lalor | elisabetta-lalor@uiowa.edu | 04/07/1998 |
| tpyson1w | 00464225 | Tamas | Pyson | tamas-pyson@uiowa.edu | 06/15/2002 |
| gokeefe1x | 00146544 | Gretel | O'Keefe | gretel-o'keefe@uiowa.edu | 01/22/2012 |
| ndrinan1y | 00532978 | Nero | Drinan | nero-drinan@uiowa.edu | 08/04/2017 |
| csplain1z | 00966293 | Cecilla | Splain | cecilla-splain@uiowa.edu | 04/21/2021 |
| apuckett20 | 00895741 | Abie | Puckett | abie-puckett@uiowa.edu | 05/23/2008 |
| felmes21 | 00395781 | Fonz | Elmes | fonz-elmes@uiowa.edu | 01/19/1991 |
| mdeporte22 | 00881930 | Mil | Deporte | mil-deporte@uiowa.edu | 04/05/1995 |
| geastmead23 | 00617432 | Gretta | Eastmead | gretta-eastmead@uiowa.edu | 10/13/1995 |
| wpanas24 | 00045500 | Way | Panas | way-panas@uiowa.edu | 08/09/2017 |
| zbarling25 | 00078128 | Zorina | Barling | zorina-barling@uiowa.edu | 08/16/1998 |
| pbergstram26 | 00375188 | Price | Bergstram | price-bergstram@uiowa.edu | 11/27/2009 |
| fteasdale27 | 00927101 | Fair | Teasdale | fair-teasdale@uiowa.edu | 03/03/1990 |
| bholston28 | 00181238 | Brocky | Holston | brocky-holston@uiowa.edu | 12/15/2018 |
| ewalasik29 | 00751738 | Ermanno | Walasik | ermanno-walasik@uiowa.edu | 06/06/2004 |
| pruxton2a | 00852703 | Pablo | Ruxton | pablo-ruxton@uiowa.edu | 04/28/1991 |
| jcopeman2b | 00819011 | Joe | Copeman | joe-copeman@uiowa.edu | 07/24/2011 |
| rmcshee2c | 00682567 | Robenia | McShee | robenia-mcshee@uiowa.edu | 01/03/1996 |
| adunkinson2d | 00817602 | Annalee | Dunkinson | annalee-dunkinson@uiowa.edu | 04/20/1993 |
| scolquit2e | 00325842 | Sigfrid | Colquit | sigfrid-colquit@uiowa.edu | 10/20/1992 |
| gfrowen2f | 00289843 | Glori | Frowen | glori-frowen@uiowa.edu | 05/29/2013 |
| rsannes2g | 00346699 | Reba | Sannes | reba-sannes@uiowa.edu | 04/26/2017 |
| cheeron2h | 00929705 | Cory | Heeron | cory-heeron@uiowa.edu | 03/14/2004 |
| pkynoch2i | 00874844 | Pace | Kynoch | pace-kynoch@uiowa.edu | 07/11/2015 |
| omarnane2j | 00776460 | Olva | Marnane | olva-marnane@uiowa.edu | 09/18/2003 |
| lreiglar2k | 00533738 | Louie | Reiglar | louie-reiglar@uiowa.edu | 10/29/2018 |
| yvigours2l | 00982156 | Yorker | Vigours | yorker-vigours@uiowa.edu | 06/20/2001 |
| khails2m | 00467737 | Kerr | Hails | kerr-hails@uiowa.edu | 04/26/2016 |
| lmcalpin2n | 00315938 | Lilla | McAlpin | lilla-mcalpin@uiowa.edu | 12/28/1994 |
| amanagh2o | 00765071 | Allina | Managh | allina-managh@uiowa.edu | 07/16/2016 |
| snoddle2p | 00372596 | Skye | Noddle | skye-noddle@uiowa.edu | 06/05/2016 |
| vgirard2q | 00676910 | Vere | Girard | vere-girard@uiowa.edu | 03/23/2016 |
| diapico2r | 00566940 | Delmor | Iapico | delmor-iapico@uiowa.edu | 04/27/2006 |
Custom rendering
Custom rendering is possible using scoped slots. It's possible to provide custom rendering for the thead, tbody and tfoot elements. Scoped slots use the following naming syntax:
- thead:
head(<fieldkey>) - tbody:
body(<fieldkey>) - tfoot:
foot(<fieldkey>)
Scoped field slots
Scoped field slots give you greater control over how the record data appears. You can use scoped slots to provide custom rendering for a particular field. If you want to add an extra field which does not exist in the records, just add it to the fields array, and then reference the field(s) in the scoped slot(s).
You can use the default fall-back scoped slot body() to format any cells that do not have an explicit scoped slot provided.
Index | Hawk ID | Display Name | Email | Retired |
|---|---|---|---|---|
| 1 | cyepiskov0 | Yepiskov, Chancey | chancey-yepiskov@uiowa.edu | |
| 2 | beyden1 | Eyden, Beaufort | beaufort-eyden@uiowa.edu | |
| 3 | fstokey2 | Stokey, Franky | franky-stokey@uiowa.edu | |
| 4 | mloisi3 | Loisi, Maximilien | maximilien-loisi@uiowa.edu | |
| 5 | ckunkler4 | Kunkler, Cyrillus | cyrillus-kunkler@uiowa.edu |
The slot's scope variable (data in the above example) will have the following properties:
Property | Type | Description |
|---|---|---|
| index | Number | The row number (indexed from zero) relative to the *displayed* rows. Note: index will not always be the actual row's index number, as it is computed after filtering, sorting and pagination have been applied to the original table data. The index value will refer to the displayed row number. |
| item | Object | The entire raw record data (i.e. items[index]) for this row (before any formatter is applied) |
| value | Any | The value for this key in the record (null or undefined if a virtual column), or the output of the field's formatter function |
| unformatted | Any | The raw value for this key in the item record (null or undefined if a virtual column), before being passed to the field's formatter function |
| field | Object | The field's field definition object |
Formatter callback
Optionally, you can customize field output by using a formatter callback function. To enable this, the field's formatter property is used. The value of this property may be a String or a function reference.
When providing formatter as a Function, it can be a function from your component or an anonymous function. The callback function accepts three arguments - value, key, and item, and should return the formatted value as a string (HTML strings are not supported)
Note: If a formatted column is sortable, you probably also want to include sortByFormatted: true. See the status column in the example below. Additionally, users may want to filter by the formatted value. In that case, use filterByFormatted. See the field defintion reference for details.
Hawk ID | Univ ID | Display Name | Email | Status |
|---|---|---|---|---|
| cyepiskov0 | 00549444 | Yepiskov, Chancey | chancey-yepiskov@uiowa.edu | Inactive |
| beyden1 | 00120802 | Eyden, Beaufort | beaufort-eyden@uiowa.edu | Active |
| fstokey2 | 00341804 | Stokey, Franky | franky-stokey@uiowa.edu | Inactive |
| mloisi3 | 00769787 | Loisi, Maximilien | maximilien-loisi@uiowa.edu | Active |
| ckunkler4 | 00580573 | Kunkler, Cyrillus | cyrillus-kunkler@uiowa.edu | Active |
Built-in Formatters
In case of a String value, it must be one of the following predefined, built-in formatters:
currency: this is for Number fields that you would like to be displayed as a string, in a currency format. You can append the following optional options, delimited by a pipe|:minimumIntegerDigits(Possible values are from 1 to 21; the default is1)minimumFractionDigits(Possible values are from 0 to 20; the default is2)maximumFractionDigits(Possible values are from 0 to 20; the default is2)
parseCurrency: parses a string that is already in a currency format to a number. Primary use for this would be in field'ssortFormatterso that you can sort by number rather than string.number: this is for Number fields that you would like displayed as a string, in a number format. You can append the following optional options, delimited by a pipe|:minimumIntegerDigits(Possible values are from 1 to 21; the default is1)minimumFractionDigits(Possible values are from 0 to 20; the default is0)maximumFractionDigits(Possible values are from 0 to 20; the default is0)
percent: this is for a Number field where the percent is represented as a decimal. You can append the following optional options, delimited by a pipe|minimumIntegerDigits(Possible values are from 1 to 21; the default is1)minimumFractionDigits(Possible values are from 0 to 20; the default is2)maximumFractionDigits(Possible values are from 0 to 20; the default is2)
date: this for formatting dates, or string representations of dates, to strings. You can append the following optional option: delimited by a pipe|format(default isMM/DD/YYYY)
dateTime: this is for formatting dateTimes, or string representations of dateTimes, to strings. You can append the following optional option: delimited by a pipe|format(default isMM/DD/YYYY h:mmA)
phone: this is for formatting a Number or String to a phone number format. This currently supports domestic phone numbers
Example: Custom data rendering using predefined, built-in formatters:
Example 1 - currency, number, and percent
Currency | Currency Rounded | Number | Number Rounded | Percent | Percent to 3 Decimals |
|---|---|---|---|---|---|
| $123,456.78 | $123,457 | 123,456 | 123,456.346 | 23.23% | 23.230% |
| $123,456.78 | $123,456 | 654,321 | 654,320.988 | 0.33% | 0.333% |
Example 2 - date, dateTime, and phone
Date | String Date | DateTime | String DateTime | Phone | Phone 2 |
|---|---|---|---|---|---|
| 01/17/2022 | 2023-01-21 | 02/23/2022 00:00 | 02/23/2022 15:30 | (319) 335-3500 | (319) 335-3500 |
| 02/17/2021 | 2022-02-17 | 02/23/2021 00:00 | 02/23/2021 15:30 | (319) 335-3500 | 335-3500 |
Example 3 - sortFormatter (sort these fields to see the difference in behavior)
with 'sortFormatter' | without 'sortFormatter' | with 'sortFormatter' | without 'sortFormatter' |
|---|---|---|---|
| $123,456 | $123,456 | 11/21/2022 | 11/21/2022 |
| $77,456 | $77,456 | 01/21/2023 | 01/21/2023 |
Scoped Header & Footer slots
Custom rendering for the tables thead and tfoot elements. Note by default the table footer is not rendered unless foot-clone is set to true. If a foot(...) slot for a field is not provided, but a head(...) slot is provided, then the footer will use the head(...) slot content.
You can use a default fall-back scoped slot head() or foot() to format any header or footer cells that do not have an explicit scoped slot provided.
Hawk ID | Univ ID | DISPLAY NAME | Email | Hire Date |
|---|---|---|---|---|
| cyepiskov0 | 00549444 | Yepiskov, Chancey | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Eyden, Beaufort | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Stokey, Franky | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Loisi, Maximilien | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Kunkler, Cyrillus | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
Hawk ID | Univ ID | Display Name | Email | Hire Date |
Header & Footer Icons
If you'd like to include an icon in your header or footer column, just use the icon field property. This property supports a string for core icons or an object for other FontAwesome icons.
Hawk ID | Univ ID | Display Name | Email | Hire Date |
|---|---|---|---|---|
| cyepiskov0 | 00549444 | Yepiskov, Chancey | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Eyden, Beaufort | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Stokey, Franky | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Loisi, Maximilien | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Kunkler, Cyrillus | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
Hawk ID | Univ ID | Display Name | Email | Hire Date |
Filtering
Filtering, when used, will filter the original items array. AisTable provides several options for how data is filtered.
If you are using a formatter on a column, users may want to filter results on the formatted value. In that case, use filterByFormatted. See the field defintion reference for details. Note: It is currently not possible to filter on formatted results when using scoped field slots
Filtering by string query
When filtering by string query, the data will be filtered only by the fields which are listed in the fields array, and therefore will not be filtered by item fields that are not displayed in your table.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
Displayed Columns
AisTable provides two types of column filters; one for dates and one for all other types. Use the boolean field properties dateFilter and/or filter, respectively, to enable the column filter for each field that you desire having a column filter on.
Hawk ID | Univ ID | First Name | Last Name | Retired | Hire Date |
|---|---|---|---|---|---|
| ckunkler4 | 00580573 | Cyrillus | Kunkler | 06/30/1990 | |
| jcooper11 | 00549444 | John | Cooper | 05/09/1990 | |
| scooper3 | 01133454 | Steve | Cooper | 01/09/2010 | |
| beyden1 | 00120802 | Beaufort | Eyden | 06/05/1998 | |
| fstokey2 | 00341804 | Franky | Stokey | 06/11/1993 | |
| mloisi3 | 00769787 | Maximilien | Loisi | 01/02/1996 | |
| nroggerone5 | 00815761 | Noella | Roggerone | 03/08/1990 | |
| tmcnamara6 | 00198639 | Tannie | McNamara | 12/26/2000 | |
| csneesby7 | 00846913 | Cherlyn | Sneesby | 09/20/2020 | |
| lcouves8 | 00541147 | Linnell | Couves | 05/28/1997 |
Non-Displayed Columns
If you would like to filter on item fields that are not displayed in your table, then you just need to add the field key(s) to the cols attribute of an object that you provide to the filter prop on the AisTable. If you also have a string query filter, just add a query attribute to this object and make sure your query input field points to this attribute.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
| jcooper11 | 00549444 | John | Cooper | john-cooper@uiowa.edu | 05/09/1990 |
| scooper3 | 01133454 | Steve | Cooper | steve-cooper@uiowa.edu | 01/09/2010 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
Busy
AisTable provides a busy prop that will flag the table as busy, which you can set to true just before you update your items, and then set it to false once you have your items. When in the busy state, the table will have the attribute aria-busy="true".
You may optionally provide a table-busy slot to show a custom loading message or spinner whenever the table's busy state is true. The slot will be placed in a <tr> element with a class busy-row, which has one single <td> with a colspan set to the number of fields.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
| fstokey2 | 00341804 | Franky | Stokey | franky-stokey@uiowa.edu | 06/11/1993 |
| mloisi3 | 00769787 | Maximilien | Loisi | maximilien-loisi@uiowa.edu | 01/02/1996 |
| ckunkler4 | 00580573 | Cyrillus | Kunkler | cyrillus-kunkler@uiowa.edu | 06/30/1990 |
Caption
Add an optional caption to your table via the caption prop or the caption slot (the slot takes precedence over the prop).
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| cyepiskov0 | 00549444 | Chancey | Yepiskov | chancey-yepiskov@uiowa.edu | 05/09/1990 |
| beyden1 | 00120802 | Beaufort | Eyden | beaufort-eyden@uiowa.edu | 06/05/1998 |
Empty
Display a message for tables that have no data to display via the show-empty boolean prop. In order for this message to be displayed, items must be either falsy or an array of length 0.
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| There are no records to show | |||||
Custom Message
Display a custom message via the empty-text prop or the empty slot. In order for this message to be displayed, the show-empty prop must be set to true and items must be either falsy or an array of length 0. The default empty message is, "There are no records to show".
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
| No results found! (using prop) | |||||
Hawk ID | Univ ID | First Name | Last Name | Email | Hire Date |
|---|---|---|---|---|---|
No results found! (using slot) | |||||
Custom Filtered Message
For a custom message when filtering results in no data to display, use the empty-filtered-text prop or emptyFiltered slot. In order for this message to be displayed, the show-empty prop must be set to true and the filtered items array must be empty. The default empty filtered message is, "There are no records matching your filter values".
Complete Example
Univ ID | Display Name | Email | Hire Date 1 | Retired |
|---|---|---|---|---|
| 00927101 | Teasdale, Fair | fair-teasdale@uiowa.edu | 03/03/1990 | |
| 00815761 | Roggerone, Noella | noella-roggerone@uiowa.edu | 03/08/1990 | |
| 00633707 | Bernhardsson, Evaleen | evaleen-bernhardsson@uiowa.edu | 03/21/1990 | |
| 00549444 | Cooper, John | john-cooper@uiowa.edu | 05/09/1990 | |
| 00166832 | Schachter, Margery | margery-schachter@uiowa.edu | 05/26/1990 | |
| 00580573 | Kunkler, Cyrillus | cyrillus-kunkler@uiowa.edu | 06/30/1990 | |
| 00395781 | Elmes, Fonz | fonz-elmes@uiowa.edu | 01/19/1991 | |
| 00316331 | Hartigan, Mac | mac-hartigan@uiowa.edu | 03/01/1991 | |
| 00180957 | Andrag, Burl | burl-andrag@uiowa.edu | 04/06/1991 | |
| 00852703 | Ruxton, Pablo | pablo-ruxton@uiowa.edu | 04/28/1991 |
Component Reference
Props
Property 1 | Type(s) | Description | Required | Default |
|---|---|---|---|---|
| bordered | Boolean | Adds borders to all the cells and headers | false | |
| borderless | Boolean | Removes all borders from cells | false | |
| busy | Boolean | When set, forces the table into the busy state.Automatically set when an items provider function is
being called | false | |
| caption | String | Text string to place in the caption element | '' | |
| currentPage | Number, String | The current page number to display when the table is paginated | 1 | |
| emptyFilteredText | String | Text string to show when the table has no items to show due to filtering | 'There are no records matching your filter values' | |
| emptyText | String | Text string to show when the table has no items to show | 'There are no records to show' | |
| fields | Array | Array of field names or array of field definition objects | [] | |
| filter | Object, String | Criteria for filtering. Internal filtering supports only string or RegExpr criteria. | '' | |
| flush | Boolean | when it's nested inside a card that has no-body prop set | false | |
| footClone | Boolean | Enable to the footer of the table, and clone the header content by default | false | |
| footRowVariant | String | Apply a color variant to the tr element in the tfoot. Falls back to head-row-variantValid values: primary, secondary | '' | |
| footVariant | String | Apply a color variant to the tfoot element. Falls back to head-variant May take precedence over foot-row-variantValid values: primary, secondary | '' | |
| headRowVariant | String | Apply a color variant to the tr element in the theadValid values: primary, secondary | '' | |
| headVariant | String | Apply a color variant to the thead element. May take precedence over head-row-variantValid values: primary, secondary | '' | |
| hover | Boolean | Enables hover styling on rows | false | |
| id | String | Used to set the id attribute on the rendered content, and used as the base to generate any additional
element IDs as needed | '' | |
| items | Array | Array of items to display | [] | |
| large | Boolean | Renders the table with larger cell padding and larger text size. Same as size="lg" | false | |
| noBorderCollapse | Boolean | Disable's the collapsing of table borders. Useful when table has sticky headers or columns | false | |
| outlined | Boolean | Adds an outline border to the table element | false | |
| perPage | Number, String | Number of rows to show per page. Set to 0 to disable pagination | 0 | |
| primaryKey | String | Name of a table field that contains a guaranteed unique value per row. Needed for tbody transition
support, and also speeds up table rendering | 'id' | |
| ruled | Boolean | Applies borders between the tbody rows | false | |
| showEmpty | Boolean | When enabled, and there are no item records to show, shows a message that there are no rows to show | false | |
| size | String | Renders the table with appropriate cell padding and font-size | '' | |
| small | Boolean | Renders the table with smaller cell padding and smaller text size. Same as size="sm" | false | |
| sortBy | Array | Array of string field keys that are currently being sorted by. Prepend any field key with
- to sort descending for that field. Set to null or [] to clear sorting. | [] | |
| sortNullFirst | Boolean | Set this prop to sort null and undefined values first. By default, null
and undefined values will be sorted last (or first, when sorting descending). Only applicable to internal sorting | false | |
| stickyBottom | String | The value that the sticky footer should begin sticking (i.e. bottom-0 or bottom-[20px] etc...) | 'bottom-0' | |
| stickyHeaders | Boolean, String | Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS
height (including units) | false | |
| stickyTop | String | The value that the sticky headers should begin sticking (i.e. top-0 or top-[20px] etc...) | 'top-0' | |
| striped | Boolean | Applies striping to the tbody rows | false | |
| tableClass | Array, Object, String | CSS class (or classes) to apply to the table element | '' | |
| tbodyClass | Array, Object, String | CSS class (or classes) to apply to the tbody element | '' | |
| tbodyTrClass | Array, Func, Object, String | CSS class (or classes) to apply to the tr element in the tbody. Can be a function that accepts an instance of
the item for that row | '' | |
| tfootClass | Array, Object, String | CSS class (or classes) to apply to the tfoot element | '' | |
| tfootTrClass | Array, Object, String | CSS class (or classes) to apply to the tr element in the tfoot | '' | |
| theadClass | Array, Object, String | CSS class (or classes) to apply to the thead element | '' | |
| theadTrClass | Array, Object, String | CSS class (or classes) to apply to the tr element in the thead | '' |
Slots
Name 1 | Scoped | Description |
|---|---|---|
| body({field.key}) | Scoped slot for custom data rendering of field data. {field.key} is the field's key name. See Scoped Field Slots | |
| foot({field.key}) | Scoped slot for custom rendering of field footer. {field.key} is the field's key name. See Scoped Header & Footer Slots | |
| head({field.key}) | Scoped slot for custom rendering of field header. {field.key} is the field's key name. See Scoped Header & Footer Slots | |
| body() | Default scoped slot for custom data rendering of field data. See Scoped Field Slots | |
| caption | No | Content to display in the table's caption element |
| empty | Content to display when no items are present in the items prop. Optionally scoped | |
| emptyFiltered | Content to display when no items are present in the items prop. Optionally scoped | |
| foot() | Default scoped slot for custom rendering of field footer. See Scoped Header & Footer Slots | |
| head() | Default scoped slot for custom rendering of field header. See Scoped Header & Footer Slots | |
| table-busy | No | Optional slot to place loading message when table is in the busy state |
Events
Event 1 | Arguments | Description |
|---|---|---|
| filtered |
| Emitted when local filtering causes a change in the number of items |
| head-clicked |
| Emitted when a header or footer cell is clicked |
| row-clicked |
| Emitted when a row is clicked |
| row-contextmenu |
| Emitted when a row is right clicked |
| row-dblclicked |
| Emitted when a row is double-clicked |
| row-hovered |
| Emitted when a row is hovered |
| row-unhovered |
| Emitted when a row is unhovered |
| sort-changed |
| Emitted when the sorting on the table has changed |