AIS Components

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:

js
const items = [
    { "id": 7032,"hawkId": "cyepiskov0", "univId": "71708376", "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": "75578382", "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": "70294083", "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": "71885795", "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": "73777687", "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": "75354999", "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": "73037787", "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": "73212220", "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": "76168484", "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": "72930577", "firstName": "Gerrard", "lastName": "Tinniswood", "fullName": "Gerrard Tinniswood", "email": "gerrard-tinniswood@uiowa.edu", "hireDate": "11/25/2020", "retired": true,"inactive": true },
]

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:

js
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' },
]

Field definition reference ​

The following field properties are recognized:

Property
Type
Description
keyString
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.
labelString
Appears in the columns table header (and footer if foot-clone is set).
classString or Array
These classes will be added to all th and td tags, in the header, body, and footer, for that column.
sortableBoolean
Enable sorting on this column. Refer to the Sorting section for more details.
iconString or Object
Easily insert an icon into your thead or tfoot header. Supports string for core icons and Object for other FontAwesome Icons
formatterString 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.
sortByFormattedBoolean
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.
filterByFormattedBoolean
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.
tdClassString 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.
thClassString or Array
These classes will be added to all th tags in the thead/tfoot for that column.
tdAttrObject 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.
sortFormatterString or Function
This functions the same as formatter, but is only used for sorting.
filterBoolean
Enable column filter on this column. Refer to Filtering section for more details
dateFilterBoolean
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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/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
scooper378989662SteveCoopersteve-cooper@uiowa.edu01/09/2010
jcooper1171708376JohnCooperjohn-cooper@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/30/1990
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/30/1990
nroggerone575354999NoellaRoggeronenoella-roggerone@uiowa.edu03/08/1990
tmcnamara673037787TannieMcNamaratannie-mcnamara@uiowa.edu12/26/2000
csneesby773212220CherlynSneesbycherlyn-sneesby@uiowa.edu09/20/2020
lcouves876168484LinnellCouveslinnell-couves@uiowa.edu05/28/1997
gtinniswood972930577GerrardTinniswoodgerrard-tinniswood@uiowa.edu11/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-[calc(var(--vp-nav-height)+1px)]" is used to make the table headers stick just below this site's fixed nav bar (its height plus its 1px bottom divider). With a fixed application header 57px tall, for instance, use sticky-top="top-[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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/30/1990
nroggerone575354999NoellaRoggeronenoella-roggerone@uiowa.edu03/08/1990
tmcnamara673037787TannieMcNamaratannie-mcnamara@uiowa.edu12/26/2000
csneesby773212220CherlynSneesbycherlyn-sneesby@uiowa.edu09/20/2020
lcouves876168484LinnellCouveslinnell-couves@uiowa.edu05/28/1997
gtinniswood972930577GerrardTinniswoodgerrard-tinniswood@uiowa.edu11/25/2020
ceassona74992154CaraEassoncara-easson@uiowa.edu02/15/1997
dseczykb70516282DurSeczykdur-seczyk@uiowa.edu07/31/1996
bstalleyc76351698BevinStalleybevin-stalley@uiowa.edu11/17/1994
ebernhardssond71123108EvaleenBernhardssonevaleen-bernhardsson@uiowa.edu03/21/1990
mponcete78957814MichailPoncetmichail-poncet@uiowa.edu11/18/2019
mhartiganf76513770MacHartiganmac-hartigan@uiowa.edu03/01/1991
hpawelekg76573562HestherPawelekhesther-pawelek@uiowa.edu11/25/2002
atuteh78016066ArlanTutearlan-tute@uiowa.edu04/30/2018
jcornbilli72255430JoanaCornbilljoana-cornbill@uiowa.edu10/02/2001
mfeelyj70635456MeredithFeelymeredith-feely@uiowa.edu05/01/2019
gdowk79022580GabiDowgabi-dow@uiowa.edu08/19/2008
bandragl70617870BurlAndragburl-andrag@uiowa.edu04/06/1991
ewyndhamm79431665EmanuelWyndhamemanuel-wyndham@uiowa.edu04/15/2015
atschirschkyn75583144AlisaTschirschkyalisa-tschirschky@uiowa.edu04/06/1995
emarklino70730696EdinMarklinedin-marklin@uiowa.edu07/16/1993
pinottp70783450PortyInottporty-inott@uiowa.edu06/19/1991
hgawithq78679537HuntleyGawithhuntley-gawith@uiowa.edu01/05/2016
msellimanr73758023MikelSellimanmikel-selliman@uiowa.edu04/20/2020
mramsiers71475955MarilynRamsiermarilyn-ramsier@uiowa.edu03/22/2004
kheggisont76861053KenHeggisonken-heggison@uiowa.edu02/22/1993
ftodeou79565535FreddyTodeofreddy-todeo@uiowa.edu07/16/1991
wbaggotv79856260WellsBaggotwells-baggot@uiowa.edu02/06/2007
shaughw78588908SaschaHaughsascha-haugh@uiowa.edu03/26/1994
nluebbertx79347243NatalyaLuebbertnatalya-luebbert@uiowa.edu12/21/1993
cbelfragey71548526ChrysaBelfragechrysa-belfrage@uiowa.edu03/14/2009
rqualtroz77335010RuggieroQualtroruggiero-qualtro@uiowa.edu08/07/2004
fbird1071707492FrankBirdfrank-bird@uiowa.edu11/10/2015
mschachter1179789374MargerySchachtermargery-schachter@uiowa.edu05/26/1990
dlauderdale1272436721DennieLauderdaledennie-lauderdale@uiowa.edu02/24/1999
tscoates1371522852TresaScoatestresa-scoates@uiowa.edu02/21/2015
lbarmby1471289505LeonoraBarmbyleonora-barmby@uiowa.edu06/22/2018
jantonomoli1570459125JoseitoAntonomolijoseito-antonomoli@uiowa.edu03/14/2014
kkeyme1672651925KrissyKeymekrissy-keyme@uiowa.edu11/28/2001
hphilipot1770586424HamPhilipotham-philipot@uiowa.edu05/19/2007
mmattei1874362251MicaelaMatteimicaela-mattei@uiowa.edu01/14/2001
wstollenhof1978812065WellsStollenhofwells-stollenhof@uiowa.edu01/19/2005
pstainer1a74056137PatriziaStainerpatrizia-stainer@uiowa.edu09/23/1996
gscorey1b76953920GrayScoreygray-scorey@uiowa.edu03/31/1994
jkinghorn1c78685253JanettaKinghornjanetta-kinghorn@uiowa.edu12/31/1994
fmorfey1d78807376FlorinaMorfeyflorina-morfey@uiowa.edu04/10/2003
rcampbell1e74288678RodgeCampbellrodge-campbell@uiowa.edu12/21/2010
chaysey1f79809786CelindaHayseycelinda-haysey@uiowa.edu01/09/2003
vapplin1g70000549VivienneApplinvivienne-applin@uiowa.edu09/01/2008
mbernholt1h76620784MattheusBernholtmattheus-bernholt@uiowa.edu03/15/2005
norviss1i72728278NertiOrvissnerti-orviss@uiowa.edu12/14/2008
jbondar1j71246263JoshiaBondarjoshia-bondar@uiowa.edu10/02/2005
fravelus1k70198424FaydraRavelusfaydra-ravelus@uiowa.edu06/01/1998
wspratt1l79293962WynnSprattwynn-spratt@uiowa.edu11/28/2021
mcleaton1m72328817MyrtleCleatonmyrtle-cleaton@uiowa.edu07/24/1991
dknyvett1n70188543DaiseyKnyvettdaisey-knyvett@uiowa.edu09/25/1994
sdorrian1o74233414StafordDorrianstaford-dorrian@uiowa.edu11/18/2006
cle1p77141777CayeLe Sarrcaye-le sarr@uiowa.edu03/05/2015
nocaine1q71821317NorthO'Cainenorth-o'caine@uiowa.edu05/07/2018
jniese1r72563909JaninaNiesejanina-niese@uiowa.edu03/18/1997
lhawtry1s78714143LauraHawtrylaura-hawtry@uiowa.edu03/15/1994
iplumbe1t78212002IvePlumbeive-plumbe@uiowa.edu08/16/2015
fkeitch1u79102728FredericKeitchfrederic-keitch@uiowa.edu03/28/2015
elalor1v71994346ElisabettaLalorelisabetta-lalor@uiowa.edu04/07/1998
tpyson1w73030838TamasPysontamas-pyson@uiowa.edu06/15/2002
gokeefe1x77244875GretelO'Keefegretel-o'keefe@uiowa.edu01/22/2012
ndrinan1y75211192NeroDrinannero-drinan@uiowa.edu08/04/2017
csplain1z79704616CecillaSplaincecilla-splain@uiowa.edu04/21/2021
apuckett2070959909AbiePuckettabie-puckett@uiowa.edu05/23/2008
felmes2178124375FonzElmesfonz-elmes@uiowa.edu01/19/1991
mdeporte2276614009MilDeportemil-deporte@uiowa.edu04/05/1995
geastmead2372648720GrettaEastmeadgretta-eastmead@uiowa.edu10/13/1995
wpanas2476083343WayPanasway-panas@uiowa.edu08/09/2017
zbarling2576221732ZorinaBarlingzorina-barling@uiowa.edu08/16/1998
pbergstram2677767200PriceBergstramprice-bergstram@uiowa.edu11/27/2009
fteasdale2779596259FairTeasdalefair-teasdale@uiowa.edu03/03/1990
bholston2873669463BrockyHolstonbrocky-holston@uiowa.edu12/15/2018
ewalasik2971645086ErmannoWalasikermanno-walasik@uiowa.edu06/06/2004
pruxton2a75974000PabloRuxtonpablo-ruxton@uiowa.edu04/28/1991
jcopeman2b72459873JoeCopemanjoe-copeman@uiowa.edu07/24/2011
rmcshee2c78373054RobeniaMcSheerobenia-mcshee@uiowa.edu01/03/1996
adunkinson2d72241987AnnaleeDunkinsonannalee-dunkinson@uiowa.edu04/20/1993
scolquit2e70904744SigfridColquitsigfrid-colquit@uiowa.edu10/20/1992
gfrowen2f73109542GloriFrowenglori-frowen@uiowa.edu05/29/2013
rsannes2g76894640RebaSannesreba-sannes@uiowa.edu04/26/2017
cheeron2h70496842CoryHeeroncory-heeron@uiowa.edu03/14/2004
pkynoch2i79020370PaceKynochpace-kynoch@uiowa.edu07/11/2015
omarnane2j70932818OlvaMarnaneolva-marnane@uiowa.edu09/18/2003
lreiglar2k73125435LouieReiglarlouie-reiglar@uiowa.edu10/29/2018
yvigours2l73260636YorkerVigoursyorker-vigours@uiowa.edu06/20/2001
khails2m72511297KerrHailskerr-hails@uiowa.edu04/26/2016
lmcalpin2n74647690LillaMcAlpinlilla-mcalpin@uiowa.edu12/28/1994
amanagh2o78277532AllinaManaghallina-managh@uiowa.edu07/16/2016
snoddle2p76478943SkyeNoddleskye-noddle@uiowa.edu06/05/2016
vgirard2q77568231VereGirardvere-girard@uiowa.edu03/23/2016
diapico2r77330489DelmorIapicodelmor-iapico@uiowa.edu04/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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/30/1990
nroggerone575354999NoellaRoggeronenoella-roggerone@uiowa.edu03/08/1990
tmcnamara673037787TannieMcNamaratannie-mcnamara@uiowa.edu12/26/2000
csneesby773212220CherlynSneesbycherlyn-sneesby@uiowa.edu09/20/2020
lcouves876168484LinnellCouveslinnell-couves@uiowa.edu05/28/1997
gtinniswood972930577GerrardTinniswoodgerrard-tinniswood@uiowa.edu11/25/2020
ceassona74992154CaraEassoncara-easson@uiowa.edu02/15/1997
dseczykb70516282DurSeczykdur-seczyk@uiowa.edu07/31/1996
bstalleyc76351698BevinStalleybevin-stalley@uiowa.edu11/17/1994
ebernhardssond71123108EvaleenBernhardssonevaleen-bernhardsson@uiowa.edu03/21/1990
mponcete78957814MichailPoncetmichail-poncet@uiowa.edu11/18/2019
mhartiganf76513770MacHartiganmac-hartigan@uiowa.edu03/01/1991
hpawelekg76573562HestherPawelekhesther-pawelek@uiowa.edu11/25/2002
atuteh78016066ArlanTutearlan-tute@uiowa.edu04/30/2018
jcornbilli72255430JoanaCornbilljoana-cornbill@uiowa.edu10/02/2001
mfeelyj70635456MeredithFeelymeredith-feely@uiowa.edu05/01/2019
gdowk79022580GabiDowgabi-dow@uiowa.edu08/19/2008
bandragl70617870BurlAndragburl-andrag@uiowa.edu04/06/1991
ewyndhamm79431665EmanuelWyndhamemanuel-wyndham@uiowa.edu04/15/2015
atschirschkyn75583144AlisaTschirschkyalisa-tschirschky@uiowa.edu04/06/1995
emarklino70730696EdinMarklinedin-marklin@uiowa.edu07/16/1993
pinottp70783450PortyInottporty-inott@uiowa.edu06/19/1991
hgawithq78679537HuntleyGawithhuntley-gawith@uiowa.edu01/05/2016
msellimanr73758023MikelSellimanmikel-selliman@uiowa.edu04/20/2020
mramsiers71475955MarilynRamsiermarilyn-ramsier@uiowa.edu03/22/2004
kheggisont76861053KenHeggisonken-heggison@uiowa.edu02/22/1993
ftodeou79565535FreddyTodeofreddy-todeo@uiowa.edu07/16/1991
wbaggotv79856260WellsBaggotwells-baggot@uiowa.edu02/06/2007
shaughw78588908SaschaHaughsascha-haugh@uiowa.edu03/26/1994
nluebbertx79347243NatalyaLuebbertnatalya-luebbert@uiowa.edu12/21/1993
cbelfragey71548526ChrysaBelfragechrysa-belfrage@uiowa.edu03/14/2009
rqualtroz77335010RuggieroQualtroruggiero-qualtro@uiowa.edu08/07/2004
fbird1071707492FrankBirdfrank-bird@uiowa.edu11/10/2015
mschachter1179789374MargerySchachtermargery-schachter@uiowa.edu05/26/1990
dlauderdale1272436721DennieLauderdaledennie-lauderdale@uiowa.edu02/24/1999
tscoates1371522852TresaScoatestresa-scoates@uiowa.edu02/21/2015
lbarmby1471289505LeonoraBarmbyleonora-barmby@uiowa.edu06/22/2018
jantonomoli1570459125JoseitoAntonomolijoseito-antonomoli@uiowa.edu03/14/2014
kkeyme1672651925KrissyKeymekrissy-keyme@uiowa.edu11/28/2001
hphilipot1770586424HamPhilipotham-philipot@uiowa.edu05/19/2007
mmattei1874362251MicaelaMatteimicaela-mattei@uiowa.edu01/14/2001
wstollenhof1978812065WellsStollenhofwells-stollenhof@uiowa.edu01/19/2005
pstainer1a74056137PatriziaStainerpatrizia-stainer@uiowa.edu09/23/1996
gscorey1b76953920GrayScoreygray-scorey@uiowa.edu03/31/1994
jkinghorn1c78685253JanettaKinghornjanetta-kinghorn@uiowa.edu12/31/1994
fmorfey1d78807376FlorinaMorfeyflorina-morfey@uiowa.edu04/10/2003
rcampbell1e74288678RodgeCampbellrodge-campbell@uiowa.edu12/21/2010
chaysey1f79809786CelindaHayseycelinda-haysey@uiowa.edu01/09/2003
vapplin1g70000549VivienneApplinvivienne-applin@uiowa.edu09/01/2008
mbernholt1h76620784MattheusBernholtmattheus-bernholt@uiowa.edu03/15/2005
norviss1i72728278NertiOrvissnerti-orviss@uiowa.edu12/14/2008
jbondar1j71246263JoshiaBondarjoshia-bondar@uiowa.edu10/02/2005
fravelus1k70198424FaydraRavelusfaydra-ravelus@uiowa.edu06/01/1998
wspratt1l79293962WynnSprattwynn-spratt@uiowa.edu11/28/2021
mcleaton1m72328817MyrtleCleatonmyrtle-cleaton@uiowa.edu07/24/1991
dknyvett1n70188543DaiseyKnyvettdaisey-knyvett@uiowa.edu09/25/1994
sdorrian1o74233414StafordDorrianstaford-dorrian@uiowa.edu11/18/2006
cle1p77141777CayeLe Sarrcaye-le sarr@uiowa.edu03/05/2015
nocaine1q71821317NorthO'Cainenorth-o'caine@uiowa.edu05/07/2018
jniese1r72563909JaninaNiesejanina-niese@uiowa.edu03/18/1997
lhawtry1s78714143LauraHawtrylaura-hawtry@uiowa.edu03/15/1994
iplumbe1t78212002IvePlumbeive-plumbe@uiowa.edu08/16/2015
fkeitch1u79102728FredericKeitchfrederic-keitch@uiowa.edu03/28/2015
elalor1v71994346ElisabettaLalorelisabetta-lalor@uiowa.edu04/07/1998
tpyson1w73030838TamasPysontamas-pyson@uiowa.edu06/15/2002
gokeefe1x77244875GretelO'Keefegretel-o'keefe@uiowa.edu01/22/2012
ndrinan1y75211192NeroDrinannero-drinan@uiowa.edu08/04/2017
csplain1z79704616CecillaSplaincecilla-splain@uiowa.edu04/21/2021
apuckett2070959909AbiePuckettabie-puckett@uiowa.edu05/23/2008
felmes2178124375FonzElmesfonz-elmes@uiowa.edu01/19/1991
mdeporte2276614009MilDeportemil-deporte@uiowa.edu04/05/1995
geastmead2372648720GrettaEastmeadgretta-eastmead@uiowa.edu10/13/1995
wpanas2476083343WayPanasway-panas@uiowa.edu08/09/2017
zbarling2576221732ZorinaBarlingzorina-barling@uiowa.edu08/16/1998
pbergstram2677767200PriceBergstramprice-bergstram@uiowa.edu11/27/2009
fteasdale2779596259FairTeasdalefair-teasdale@uiowa.edu03/03/1990
bholston2873669463BrockyHolstonbrocky-holston@uiowa.edu12/15/2018
ewalasik2971645086ErmannoWalasikermanno-walasik@uiowa.edu06/06/2004
pruxton2a75974000PabloRuxtonpablo-ruxton@uiowa.edu04/28/1991
jcopeman2b72459873JoeCopemanjoe-copeman@uiowa.edu07/24/2011
rmcshee2c78373054RobeniaMcSheerobenia-mcshee@uiowa.edu01/03/1996
adunkinson2d72241987AnnaleeDunkinsonannalee-dunkinson@uiowa.edu04/20/1993
scolquit2e70904744SigfridColquitsigfrid-colquit@uiowa.edu10/20/1992
gfrowen2f73109542GloriFrowenglori-frowen@uiowa.edu05/29/2013
rsannes2g76894640RebaSannesreba-sannes@uiowa.edu04/26/2017
cheeron2h70496842CoryHeeroncory-heeron@uiowa.edu03/14/2004
pkynoch2i79020370PaceKynochpace-kynoch@uiowa.edu07/11/2015
omarnane2j70932818OlvaMarnaneolva-marnane@uiowa.edu09/18/2003
lreiglar2k73125435LouieReiglarlouie-reiglar@uiowa.edu10/29/2018
yvigours2l73260636YorkerVigoursyorker-vigours@uiowa.edu06/20/2001
khails2m72511297KerrHailskerr-hails@uiowa.edu04/26/2016
lmcalpin2n74647690LillaMcAlpinlilla-mcalpin@uiowa.edu12/28/1994
amanagh2o78277532AllinaManaghallina-managh@uiowa.edu07/16/2016
snoddle2p76478943SkyeNoddleskye-noddle@uiowa.edu06/05/2016
vgirard2q77568231VereGirardvere-girard@uiowa.edu03/23/2016
diapico2r77330489DelmorIapicodelmor-iapico@uiowa.edu04/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
1cyepiskov0Yepiskov, Chanceychancey-yepiskov@uiowa.edu
2beyden1Eyden, Beaufortbeaufort-eyden@uiowa.edu
3fstokey2Stokey, Frankyfranky-stokey@uiowa.edu
4mloisi3Loisi, Maximilienmaximilien-loisi@uiowa.edu
5ckunkler4Kunkler, Cyrilluscyrillus-kunkler@uiowa.edu

The slot's scope variable (data in the above example) will have the following properties:

Property
Type
Description
indexNumberThe 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.
itemObjectThe entire raw record data (i.e. items[index]) for this row (before any formatter is applied)
valueAnyThe value for this key in the record (null or undefined if a virtual column), or the output of the field's formatter function
unformattedAnyThe 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
fieldObjectThe 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
cyepiskov071708376Yepiskov, Chanceychancey-yepiskov@uiowa.eduInactive
beyden175578382Eyden, Beaufortbeaufort-eyden@uiowa.eduActive
fstokey270294083Stokey, Frankyfranky-stokey@uiowa.eduInactive
mloisi371885795Loisi, Maximilienmaximilien-loisi@uiowa.eduActive
ckunkler473777687Kunkler, Cyrilluscyrillus-kunkler@uiowa.eduActive

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 is 1)
    • minimumFractionDigits (Possible values are from 0 to 20; the default is 2)
    • maximumFractionDigits (Possible values are from 0 to 20; the default is 2)
  • parseCurrency: parses a string that is already in a currency format to a number. Primary use for this would be in field's sortFormatter so 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 is 1)
    • minimumFractionDigits (Possible values are from 0 to 20; the default is 0)
    • maximumFractionDigits (Possible values are from 0 to 20; the default is 0)
  • 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 is 1)
    • minimumFractionDigits (Possible values are from 0 to 20; the default is 2)
    • maximumFractionDigits (Possible values are from 0 to 20; the default is 2)
  • 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 is MM/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 is MM/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,457123,456123,456.34623.23%23.230%
$123,456.78$123,456654,321654,320.9880.33%0.333%
Example 2 - date, dateTime, and phone
Date
String Date
DateTime
String DateTime
Phone
Phone 2
01/17/20222023-01-2102/23/2022 00:0002/23/2022 15:30(319) 335-3500(319) 335-3500
02/17/20212022-02-1702/23/2021 00:0002/23/2021 15:30(319) 335-3500335-3500
Example 3 - sortFormatter (sort these fields to see the difference in behavior)
with 'sortFormatter'
without 'sortFormatter'
with 'sortFormatter'
without 'sortFormatter'
$123,456$123,45611/21/202211/21/2022
$77,456$77,45601/21/202301/21/2023

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
cyepiskov071708376Yepiskov, Chanceychancey-yepiskov@uiowa.edu05/09/1990
beyden175578382Eyden, Beaufortbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083Stokey, Frankyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795Loisi, Maximilienmaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687Kunkler, Cyrilluscyrillus-kunkler@uiowa.edu06/30/1990
Hawk ID
Univ ID
Display Name
Email
Hire Date

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
cyepiskov071708376Yepiskov, Chanceychancey-yepiskov@uiowa.edu05/09/1990
beyden175578382Eyden, Beaufortbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083Stokey, Frankyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795Loisi, Maximilienmaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687Kunkler, Cyrilluscyrillus-kunkler@uiowa.edu06/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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/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
ckunkler473777687CyrillusKunkler06/30/1990
jcooper1171708376JohnCooper05/09/1990
scooper378989662SteveCooper01/09/2010
beyden175578382BeaufortEyden06/05/1998
fstokey270294083FrankyStokey06/11/1993
mloisi371885795MaximilienLoisi01/02/1996
nroggerone575354999NoellaRoggerone03/08/1990
tmcnamara673037787TannieMcNamara12/26/2000
csneesby773212220CherlynSneesby09/20/2020
lcouves876168484LinnellCouves05/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
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/30/1990
jcooper1171708376JohnCooperjohn-cooper@uiowa.edu05/09/1990
scooper378989662SteveCoopersteve-cooper@uiowa.edu01/09/2010
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/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
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
fstokey270294083FrankyStokeyfranky-stokey@uiowa.edu06/11/1993
mloisi371885795MaximilienLoisimaximilien-loisi@uiowa.edu01/02/1996
ckunkler473777687CyrillusKunklercyrillus-kunkler@uiowa.edu06/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).

Caption using the 'caption' prop
Hawk ID
Univ ID
First Name
Last Name
Email
Hire Date
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/05/1998
Caption using the 'caption' slot
Hawk ID
Univ ID
First Name
Last Name
Email
Hire Date
cyepiskov071708376ChanceyYepiskovchancey-yepiskov@uiowa.edu05/09/1990
beyden175578382BeaufortEydenbeaufort-eyden@uiowa.edu06/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 ​

Faculty List
Univ ID
Display Name
Email
Hire Date
1
Retired
79596259Teasdale, Fairfair-teasdale@uiowa.edu03/03/1990
75354999Roggerone, Noellanoella-roggerone@uiowa.edu03/08/1990
71123108Bernhardsson, Evaleenevaleen-bernhardsson@uiowa.edu03/21/1990
71708376Cooper, Johnjohn-cooper@uiowa.edu05/09/1990
79789374Schachter, Margerymargery-schachter@uiowa.edu05/26/1990
73777687Kunkler, Cyrilluscyrillus-kunkler@uiowa.edu06/30/1990
78124375Elmes, Fonzfonz-elmes@uiowa.edu01/19/1991
76513770Hartigan, Macmac-hartigan@uiowa.edu03/01/1991
70617870Andrag, Burlburl-andrag@uiowa.edu04/06/1991
75974000Ruxton, Pablopablo-ruxton@uiowa.edu04/28/1991

Component Reference ​

Props ​

Property
Type(s)
Required
Default
Description
Deprecated
bordered
Boolean
false
Adds borders to all the cells and headers
false
borderless
Boolean
false
Removes all borders from cells
false
busy
Boolean
false
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
false
currentPage
Number, String
1
The current page number to display when the table is paginated
false
emptyFilteredText
String
'There are no records matching your filter values'
Text string to show when the table has no items to show due to filtering
false
emptyText
String
'There are no records to show'
Text string to show when the table has no items to show
false
fields
Array
[]
Array of field names or array of field definition objects
false
filter
Object, String
''
Criteria for filtering. Internal filtering supports only string or RegExpr criteria.
false
flush
Boolean
false
when it's nested inside a card that has no-body prop set
false
footClone
Boolean
false
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-variant
Valid values:
primary, secondary
false
footVariant
String
''
Apply a color variant to the tfoot element. Falls back to head-variant May take precedence over foot-row-variant
Valid values:
primary, secondary
false
headRowVariant
String
''
Apply a color variant to the tr element in the thead
Valid values:
primary, secondary
false
headVariant
String
''
Apply a color variant to the thead element. May take precedence over head-row-variant
Valid values:
primary, secondary
false
hover
Boolean
false
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
false
items
Array
[]
Array of items to display
false
large
Boolean
false
Renders the table with larger cell padding and larger text size. Same as size="lg"
false
noBorderCollapse
Boolean
false
Disable's the collapsing of table borders. Useful when table has sticky headers or columns
false
outlined
Boolean
false
Adds an outline border to the table element
false
perPage
Number, String
0
Number of rows to show per page. Set to 0 to disable pagination
false
primaryKey
String
'id'
Name of a table field that contains a guaranteed unique value per row. Needed for tbody transition support, and also speeds up table rendering
false
ruled
Boolean
false
Applies borders between the tbody rows
false
showEmpty
Boolean
false
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
false
small
Boolean
false
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.
false
sortNullFirst
Boolean
false
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
'bottom-0'
The value that the sticky footer should begin sticking (i.e. bottom-0 or bottom-[20px] etc...)
false
stickyHeaders
Boolean, String
false
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
'top-0'
The value that the sticky headers should begin sticking (i.e. top-0 or top-[20px] etc...)
false
striped
Boolean
false
Applies striping to the tbody rows
false
tableClass
Array, Object, String
''
CSS class (or classes) to apply to the table element
false
tbodyClass
Array, Object, String
''
CSS class (or classes) to apply to the tbody element
false
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
false
tfootClass
Array, Object, String
''
CSS class (or classes) to apply to the tfoot element
false
tfootTrClass
Array, Object, String
''
CSS class (or classes) to apply to the tr element in the tfoot
false
theadClass
Array, Object, String
''
CSS class (or classes) to apply to the thead element
false
theadTrClass
Array, Object, String
''
CSS class (or classes) to apply to the tr element in the thead
false

Slots ​

Name
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
Arguments
Description
filtered
  • filteredItems
    array
    -
    Array of items after filtering (before local pagination occurs)
Emitted when local filtering causes a change in the number of items
head-clicked
  • key
    string
    -
    Column key clicked (field name)
  • field
    object
    -
    Field definition object
  • event
    object
    -
    Native event object
  • isFooter
    boolean
    -
    true if this event originated from clicking on the footer cell
Emitted when a header or footer cell is clicked
row-clicked
  • item
    object
    -
    Item data of the row being clicked
  • index
    number
    -
    Index of the row being clicked
  • event
    object
    -
    Native event object
Emitted when a row is clicked
row-contextmenu
  • item
    object
    -
    Item data of the row being clicked
  • index
    number
    -
    Index of the row being clicked
  • event
    object
    -
    Native event object
Emitted when a row is right clicked
row-dblclicked
  • item
    object
    -
    Item data of the row being clicked
  • index
    number
    -
    Index of the row being clicked
  • event
    object
    -
    Native event object
Emitted when a row is double-clicked
row-hovered
  • item
    object
    -
    Item data of the row being clicked
  • index
    number
    -
    Index of the row being clicked
  • event
    object
    -
    Native event object
Emitted when a row is hovered
row-unhovered
  • item
    object
    -
    Item data of the row being clicked
  • index
    number
    -
    Index of the row being clicked
  • event
    object
    -
    Native event object
Emitted when a row is unhovered
sort-changed
  • item
    object
    -
    The array representing the new sort order
Emitted when the sorting on the table has changed