package Ġsamples . table Ċ Ċ import Ġan td . divider . divider Ċ import Ġan td . table . Table Component Ċ import Ġan td . table . table Ċ import Ġan td . table . table Column Ċ import Ġan td . table . table Column Group Ċ import Ġan td . tag . tag Ċ import Ġkotlin ext . js . js Object Ċ import Ġreact . R Builder Ċ import Ġreact . build Element Ċ import Ġreact . dom . a Ċ import Ġreact . dom . span Ċ import Ġstyled . css Ċ import Ġstyled . styled Div Ċ Ċ private Ġexternal Ġinterface ĠJ sx TableData Item Ġ{ ĊĠĠĠ Ġvar Ġkey : ĠString ĊĠĠĠ Ġvar ĠfirstName : ĠString ĊĠĠĠ Ġvar ĠlastName : ĠString ĊĠĠĠ Ġvar Ġage : ĠNumber ĊĠĠĠ Ġvar Ġaddress : ĠString ĊĠĠĠ Ġvar Ġtags : ĠArray < String > Ċ } Ċ Ċ private Ġval Ġdata Ġ= ĠarrayOf < Js x TableData Item >( ĊĠĠĠ Ġjs Object Ġ{ ĊĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" 1 " ĊĠĠĠĠĠĠĠ ĠfirstName Ġ= Ġ" John " ĊĠĠĠĠĠĠĠ ĠlastName Ġ= Ġ" B rown " ĊĠĠĠĠĠĠĠ Ġage Ġ= Ġ 3 2 ĊĠĠĠĠĠĠĠ Ġaddress Ġ= Ġ" New ĠYork ĠNo . Ġ 1 ĠLake ĠPark " ĊĠĠĠĠĠĠĠ Ġtags Ġ= ĠarrayOf (" nice ", Ġ" developer ") ĊĠĠĠ Ġ}, ĊĠĠĠ Ġjs Object Ġ{ ĊĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" 2 " ĊĠĠĠĠĠĠĠ ĠfirstName Ġ= Ġ" Jim " ĊĠĠĠĠĠĠĠ ĠlastName Ġ= Ġ" Green " ĊĠĠĠĠĠĠĠ Ġage Ġ= Ġ 4 2 ĊĠĠĠĠĠĠĠ Ġaddress Ġ= Ġ" L ondon ĠNo . Ġ 1 ĠLake ĠPark " ĊĠĠĠĠĠĠĠ Ġtags Ġ= ĠarrayOf (" lo ser ") ĊĠĠĠ Ġ}, ĊĠĠĠ Ġjs Object Ġ{ ĊĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" 3 " ĊĠĠĠĠĠĠĠ ĠfirstName Ġ= Ġ" Jo e " ĊĠĠĠĠĠĠĠ ĠlastName Ġ= Ġ" Black " ĊĠĠĠĠĠĠĠ Ġage Ġ= Ġ 3 2 ĊĠĠĠĠĠĠĠ Ġaddress Ġ= Ġ" Sid ney ĠNo . Ġ 1 ĠLake ĠPark " ĊĠĠĠĠĠĠĠ Ġtags Ġ= ĠarrayOf (" cool ", Ġ" teacher ") ĊĠĠĠ Ġ} Ċ ) Ċ Ċ fun ĠR Builder . jsx () Ġ{ ĊĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠ Ġcss Ġ{ Ġ+ Table Styles . jsx Ġ} ĊĠĠĠĠĠĠĠ Ġtable < Js x TableData Item , ĠTable Component < Js x TableData Item >> Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . dataSource Ġ= Ġdata ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column Group < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . title Ġ= Ġ" Name " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" First ĠName " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdataIndex Ġ= Ġ" firstName " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" firstName " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Last ĠName " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdataIndex Ġ= Ġ" lastName " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" lastName " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Age " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdataIndex Ġ= Ġ" age " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" age " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Address " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdataIndex Ġ= Ġ" address " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" address " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Tags " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdataIndex Ġ= Ġ" tags " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" tags " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Ġ= Ġ{ Ġtags , Ġ_, Ġ_ Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbuild Element Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtags . unsafe Cast < Array < String >> (). map Ġ{ Ġtag Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtag Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcolor Ġ= Ġ" blue " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġtag ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ tag ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}. to Typed Array () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtable Column < Js x TableData Item > Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Action " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" action " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Ġ= Ġ{ Ġ_, Ġrecord , Ġ_ Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbuild Element Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . href Ġ= Ġ" javascript : ;" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Invite Ġ${ record . lastName }" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdivider Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . type Ġ= Ġ" vertical " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . href Ġ= Ġ" javascript : ;" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Delete " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ