Taulukko on sopiva esitysmuoto silloin, kun tiedoilla on sama tai samankaltainen rakenne. Taulukot säästävät tilaa
ja helpottavat tietojen silmäilyä ja vertailua. Pyri pitämään sarakeotsikoiden ja taulukon solujen sisältö tiiviinä. Liian pitkät
sisällöt heikentävät taulukon luettavuutta ja vaikeuttavat vertailua.
Tee näin
Esitä taulukon sisältö tiiviisti, se helpottaa silmäilyä ja vertailua.
Otsikoi taulukon sarakkeet lyhyesti ja selkeästi.
Varmista taulukoiden toiminta ruudunlukijalla ja eri kokoisilla näytöillä.
Älä tee näin
Älä käytä taulukoita sivurakenteen toteutukseen tai sisältöjen asetteluun.
Älä käytä taulukoissa eri fonttikokoa saman näkymän tai palvelun sisällä, ellei se ole perusteltua.
Responsiivisuus
Suurten tietomäärien esittäminen pienellä näytöllä on haastavaa, eikä Table-komponentti välttämättä ratkaise tätä ongelmaa.
Responsiivisten taulukoiden toteutukseen on useita eri vaihtoehtoja ja oikea toteutustapa riippuu sisällöstä ja sen käyttökontekstista.
toiminnallisuus, jolla käyttäjä voi itse valita mitä sarakkeita taulukossa näytetään
jokin kokonaan muu esitystapa kuin taulukko
Table tarjoaa tällä hetkellä valmiina avattavat rivit ja sivusuunnassa vieritettävän taulukon.
Saavutettavuus
Otsikoi taulukon solut ja merkitse otsikointi ruudunlukijoille joko HTML-taulukon scope-attribuutilla, tai vaihtoehtoisesti käyttämällä id- ja headers-attribuuttia.
Jos taulukoissa on tyhjiä soluja, ne jätetään lähtökohtaisesti tyhjiksi.
Jos kaikissa sarakkeissa pitäisi olla tieto (esim. Kyllä / Ei), on taulukon yläpuolella kerrottava, mitä tyhjä solu tarkoittaa.
Esim. “Alla olevassa taulukossa tyhjä sarake tarkoittaa, että kyseinen tieto ei ole vielä saapunut Kelaan.”
Muista aina antaa pelkkiä kuvakkeita sisältäville soluille ja painikkeille saavutettavat tekstivastineet.
rivin tilakuvake
rivin valintaruutu/-painike
rivin avauspainike
muut painikkeet
Vältä monimutkaisten taulukkorakenteiden käyttöä, esim. sisäkkäiset taulukot tai erilaiset yhdistetyt solut. Näiden käyttö
tekee taulukosta vaikeasti ymmärrettävän erityisesti ruudunlukijoiden käyttäjille.
Järjestettävää taulukkoa käytettäessä komponentille voi antaa orderLabel ja orderKeyLabel-propit. orderKeyLabel välittää ruudunlukijalle sarakkeen järjestyksestä kertovan tekstin.
orderLabel välittää ruudunlukijalle järjestetyn sarakkeen otsikkotekstin.
Esimerkki proppien käytöstä ja tarkempi ohjeistus järjestettävästä talukosta löytyy Taulukon järjestäminen osiosta.
Taulukon rakenne ja ulkoasu
Tasaa taulukon solut sisältötyyppien mukaan oikealle tai vasemmalle.
Suositukset:
teksti, päivämäärät ja kellonajat tasataan vasemmalle
muut numeeriset arvot, kuten rahasummat tai muut vertailtavat lukuarvot tasataan oikealle
tasaa sarakeotsikot aina sisältöä vastaavasti
tasaa taulukon lukusuunnassa ensimmäinen sarake aina vasemmalle.
Esitä toistuvat yksiköt, kuten rahayksiköt, sarakeotsikoissa.
Taulukoissa käytetään oletuksena samaa tekstikokoa kuin leipätekstissä. Sarakeotsikot ovat lihavoituja ja ne erotetaan
sisältösoluista selkeästi erottuvalla reunaviivalla. Taulukon sisältörivit erotetaan toisistaan vaakaviivoilla.
Taulukon rivin voi korostaa tehostevärillä ja kuvakkeella.
Sininen rivi (info): lisätieto, joka asiakkaan on hyvä tietää tai joka tukee hänen toimintaansa.
Vihreä rivi (success): onnistuneen toiminnon korostaminen.
Keltainen rivi (warning): huomiota vaativa tilanne, esim. tiedon tarkistaminen.
Punainen rivi (danger): välittömästi käyttäjän toimia vaativa tilanne, esim. virhe.
Taulukon muille riveille lisätään automaattisesti kuvaketta vastaava tyhjä solu niin, että taulukon rakenne pysyy ehjänä. Muista
lisätä otsikkoriville ja korostetulle riville ruudunlukijoiden tekstivastine variantLabel-propilla.
variantLabel-prop toimii myös kuvakkeen lisätietotekstinä.
Käytä avattavaa riviä, kun kaikki taulukkoon haluttu tieto ei mahdu esitettäväksi tai kun haluat priorisoida taulukossa olevaa tietoa. Vähemmän tärkeän tiedon tai riviin liittyviä toimintoja voi laittaa piiloon avattavan rivin sisälle.
Muista lisätä avauspainikkeiden kuvakkeille saavutettava tekstivastine collapseLabel-propilla.
const Test = () => {
const { isToggleOn: isOpen, flipToggle: toggleOpen, flipAll: toggleAllOpen } = useToggle();
return (
<Table>
<TableHead>
<TableHeadRow
id="toggle-row-header"
isOpen={isOpen("toggle-row-header")}
collapseOnClick={() => toggleAllOpen(["toggle-row-header", "toggle-row-1", "toggle-row-2"])}
collapseLabel="Laajenna kaikki rivit"
>
<TableHeader scope="col">Tutkinnon laajuus op</TableHeader>
<TableHeader scope="col" align="numeric">
Huomioitava lainan enimmäismäärä e
</TableHeader>
<TableHeader scope="col" align="numeric">
Opintolainahyvityksen enimmäismäärä e
</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow
id="toggle-row-1"
isOpen={isOpen("toggle-row-1")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-1")}
collapseColspan={4}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell>210</TableCell>
<TableCell align="numeric">12 800,00</TableCell>
<TableCell align="numeric">4 120,00</TableCell>
</TableRow>
<TableRow
id="toggle-row-2"
isOpen={isOpen("toggle-row-2")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-2")}
collapseColspan={4}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell>180</TableCell>
<TableCell align="numeric">10 800,00</TableCell>
<TableCell align="numeric">3 320,00</TableCell>
</TableRow>
</TableBody>
</Table>
);
};
render(<Test />);
Tarvittaessa koko rivin voi määrittää klikattavaksi alueeksi. Samalle riville ei silloin kannata lisätä muita klikattavia toimintoja.
const Test = () => {
const { isToggleOn: isOpen, flipToggle: toggleOpen, flipAll: toggleAllOpen } = useToggle();
return (
<Table>
<TableHead>
<TableHeadRow
id="toggle-row-header"
isOpen={isOpen("toggle-row-header")}
collapseOnClick={() => toggleAllOpen(["toggle-row-header", "toggle-row-1", "toggle-row-2"])}
collapseLabel="Laajenna kaikki rivit"
>
<TableHeader scope="col">Tutkinnon laajuus op</TableHeader>
<TableHeader scope="col" align="numeric">
Huomioitava lainan enimmäismäärä e
</TableHeader>
<TableHeader scope="col" align="numeric">
Opintolainahyvityksen enimmäismäärä e
</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow
className="kds-cursor-pointer"
onClick={() => toggleOpen("toggle-row-1")}
id="toggle-row-1"
isOpen={isOpen("toggle-row-1")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-1")}
collapseColspan={4}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell>210</TableCell>
<TableCell align="numeric">12 800,00</TableCell>
<TableCell align="numeric">4 120,00</TableCell>
</TableRow>
<TableRow
className="kds-cursor-pointer"
onClick={() => toggleOpen("toggle-row-2")}
id="toggle-row-2"
isOpen={isOpen("toggle-row-2")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-2")}
collapseColspan={4}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell>180</TableCell>
<TableCell align="numeric">10 800,00</TableCell>
<TableCell align="numeric">3 320,00</TableCell>
</TableRow>
</TableBody>
</Table>
);
};
render(<Test />);
Rivien valinta
Useiden rivien valinta valintaruuduilla.
Taulukon toiminnoille on suunnitteilla työkalupalkki, mutta sitä ei ole vielä toteutettu.
Rivien valinnan toimintaa sivutetussa taulukossa ei ole vielä päätetty tai ohjeistettu.
Käytettäessä estettyjä valintaruutuja, jää sovelluksen vastuulle huolehtia siitä, että valintoja ei päivitetä esimerkiksi "valitse kaikki" -toiminnolla.
const Test = () => {
const { isToggleOn: isOpen, flipToggle: toggleOpen, flipAll: toggleAllOpen } = useToggle();
const { isToggleOn: isSelected, flipToggle: toggleSelect, flipAll: toggleAllSelected } = useToggle();
return (
<Table>
<TableHead>
<TableHeadRow
id="toggle-row-select-header"
isOpen={isOpen("toggle-row-select-header")}
collapseOnClick={() =>
toggleAllOpen(["toggle-row-select-header", "toggle-row-select-1", "toggle-row-select-2"])
}
collapseLabel="Laajenna kaikki rivit"
selectLabel="Valitse kaikki rivit"
selectOnChange={() => toggleAllSelected(["0", "1", "2"])}
>
<TableHeader scope="col">Tutkinnon laajuus op</TableHeader>
<TableHeader scope="col" align="numeric">
Huomioitava lainan enimmäismäärä e
</TableHeader>
<TableHeader scope="col" align="numeric">
Opintolainahyvityksen enimmäismäärä e
</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow
id="toggle-row-select-1"
isOpen={isOpen("toggle-row-select-1")}
checkbox
isSelected={isSelected("1")}
selectLabel="Valitse rivi"
selectOnChange={() => toggleSelect("1")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-select-1")}
collapseColspan={5}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell>180</TableCell>
<TableCell align="numeric">10 800,00</TableCell>
<TableCell align="numeric">3 320,00</TableCell>
</TableRow>
<TableRow
id="toggle-row-select-2"
isOpen={isOpen("toggle-row-select-2")}
checkbox
isSelected={isSelected("2")}
selectLabel="Valitse rivi"
selectOnChange={() => toggleSelect("2")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-select-2")}
collapseColspan={5}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell>210</TableCell>
<TableCell align="numeric">12 800,00</TableCell>
<TableCell align="numeric">4 120,00</TableCell>
</TableRow>
</TableBody>
</Table>
);
};
render(<Test />);
Tarvittaessa toimintaa voi myös räätälöidä.
const Test = () => {
const { isToggleOn: isOpen, flipToggle: toggleOpen } = useToggle();
const { isToggleOn: isSelected, flipToggle: toggleSelect } = useToggle();
return (
<Table>
<TableHead>
<TableHeadRow id="toggle-row-select-custom-header" isOpen={isOpen("toggle-row-select-custom-header")}>
<TableHeader scope="col" className="kds-table__cell-icon" />
<TableHeader scope="col" className="kds-table__cell-icon" />
<TableHeader scope="col">Tutkinnon laajuus op</TableHeader>
<TableHeader scope="col" align="numeric">
Huomioitava lainan enimmäismäärä e
</TableHeader>
<TableHeader scope="col" align="numeric">
Opintolainahyvityksen enimmäismäärä e
</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow
id="toggle-row-select-custom-1"
isOpen={isOpen("toggle-row-select-custom-1")}
isSelected={isSelected("1")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-select-custom-1")}
collapseColspan={5}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell className="kds-table__cell-icon">
<Checkbox
id="select-row-1"
name="select-row-1"
onChange={() => toggleSelect("1")}
checked={isSelected("1")}
labelText="Valitse rivi"
hideLabel
/>
</TableCell>
<TableCell>180</TableCell>
<TableCell align="numeric">10 800,00</TableCell>
<TableCell align="numeric">3 320,00</TableCell>
</TableRow>
<TableRow
id="toggle-row-select-custom-2"
isOpen={isOpen("toggle-row-select-custom-2")}
isSelected={isSelected("2")}
collapseLabel="Laajenna rivi"
collapseOnClick={() => toggleOpen("toggle-row-select-custom-2")}
collapseColspan={5}
collapseContent={() => (
<>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus
auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec
lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis.
</Text>
</>
)}
>
<TableCell className="kds-table__cell-icon">
<Checkbox
id="select-row-2"
name="select-row-2"
onChange={() => toggleSelect("2")}
checked={isSelected("2")}
labelText="Valitse rivi"
hideLabel
/>
</TableCell>
<TableCell>210</TableCell>
<TableCell align="numeric">12 800,00</TableCell>
<TableCell align="numeric">4 120,00</TableCell>
</TableRow>
<TableRow id="toggle-row-select-custom-3">
<TableCell className="kds-table__cell-icon">
<IconCaretDown aria-hidden color={COLOR_KELA_GRAY_60} size="s" />
</TableCell>
<TableCell className="kds-table__cell-icon">
<Checkbox id="select-row-3" name="select-row-3" labelText="Valitse rivi" hideLabel disabled />
</TableCell>
<TableCell>240</TableCell>
<TableCell align="numeric">14 400,00</TableCell>
<TableCell align="numeric">4 760,00</TableCell>
</TableRow>
</TableBody>
</Table>
);
};
render(<Test />);
Taulukon järjestäminen
Taulukon sarakkeiden otsikoista voi tehdä painikkeet välittämällä TableHeader-komponentille onClick- ja order-propit.
Voit käyttää KDS:in tarjoamaa useSort-hookia tekstiä ja numeroita sisältävien solujen järjestämiseen. Muissa tapauksissa
toteuta rivien järjestämiselle oma ratkaisu.
Järjestystoiminnon tulee noudattaa aina samaa järjestystä, kun painiketta painetaan: ei järjestystä -> laskeva järjestys -> nouseva järjestys -> ei järjestystä...
Ruudunlukija lukee sarakeotsikon aria-sort-attribuutin kun kohdistus siirtyy otsikkosoluun tai poistuu siitä. Table-komponentti toteuttaa
aria live -alueen, joka kertoo ruudunlukijoille järjestyksen automaattisesti kun painiketta painetaan. Muista välittää
komponentille aria live -alueen tarvitsemat tekstit:
orderKeyLabel: järjestetyn sarakkeen otsikko, esim. “Lisätieto”
orderLabel: järjestyksen suunta, esim. “järjestetty laskevasti”
Ruudunlukija lukee tekstit muodossa {orderKeyLabel} {orderLabel}, esim. “Lisätieto järjestetty laskevasti”, kun taulukon järjestys muuttuu.
Näytettävän tiedon tiheydestä ja määrästä riippuen voi olla tarpeellista käyttää tiivistettyä taulukkoa.
Tiivistettyä taulukkoa käyttäessä on huomioitava, että se on suunniteltu käytettäväksi asiantuntijakäyttöliittymissä.
Pitkien taulukoiden rivien korostamiseen voi käyttää apuna raidallista korostusta.
Raidallista taulukkoa käytettäessä on hyvä huomioida, että raidoituksen käyttäminen muun visuaalisen korostuksen kanssa voi tehdä taulukosta hankalasti tulkittavan.
Pitkät taulukot voivat olla hankalasti luettavia etenkin pienillä näytöillä.
Jos taulukon sisältö ei kokonaisuudessaan mahdu näytölle, on syytä harkita kelluvan otsikkorivin käyttämistä.
Vieritettäessä taulukon otsikkorivi kelluu sisällön päällä, parantaen luettavuutta etenkin mobiililaitteilla.
Alla on karkea esimerkki, jonka suorituskykyä ei ole arvioitu. Jos taulukko mahtuu mobiiliruudulle, voi responsive-propin asettaa arvoon false ja toteuttaa kelluvan otsikkorivin pelkästään CSS:n position: sticky; määrityksellä.
Näytettävän tiedon tiheydestä riippuen taulukon näyttämää dataa voi tiivistää antamalla komponentille size-propin.
Tiivistetyssä taulukossa on pienennetty fonttikoko sekä tiiviimmät otsikkorivit ja rivivälit.
Taulukon size-proppia käytettäessä tulee taulukkoon sijoitettavien lomakekomponenttien size-propin arvoksi asettaa xs.
Esimerkki taulukkokomponentin soveltamisesta. Taulukkoa pienennetty,
koska taulukossa on paljon tietoa ja se on kapeassa palstassa.
const TableExample = () => (
<Table size="sm">
<TableHead>
<TableRow>
<TableHeader scope="col">Tunniste</TableHeader>
<TableHeader scope="col">Fi</TableHeader>
<TableHeader scope="col" />
<TableHeader scope="col" />
<TableHeader scope="col">Tila</TableHeader>
<TableHeader scope="col">Tekstikirjastot</TableHeader>
<TableHeader scope="col" />
<TableHeader scope="col" />
</TableRow>
</TableHead>
<TableBody>
<TableRow isSelected>
<TableCell>
<Link href="#">123</Link>
</TableCell>
<TableCell>
<Textarea
size="xs"
defaultValue="Päivämäärä on virheellinen. Kirjoita päivämäärä esim. muodossa 'pp.kk.vvvv'."
/>
</TableCell>
<TableCell />
<TableCell />
<TableCell className="kds-whitespace-nowrap">
<Select defaultValue={1} size="xs">
<option value="0">(Valitse)</option>
<option value="1">Tuotannossa</option>
<option value="2">Poistumassa</option>
<option value="3">Poistettu</option>
</Select>
</TableCell>
<TableCell>
Käyttöliittymätekstit
<br />
Järjestelmä A
<br />
Järjestelmä B
<br />
Järjestelmä C
</TableCell>
<TableCell>
<IconSave color={COLOR_KELA_BLUE_60} size="s" />
</TableCell>
<TableCell>
<IconUndo color={COLOR_KELA_BLUE_60} size="s" />
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Link href="#">456</Link>
</TableCell>
<TableCell>Luku on virheellinen. Syötä luku pelkillä numeroilla (1-4 merkkiä).</TableCell>
<TableCell />
<TableCell />
<TableCell className="kds-whitespace-nowrap">
<Badge className="kds-mr-1" variant="success" /> Tuotannossa
</TableCell>
<TableCell>
Käyttöliittymätekstit
<br />
Järjestelmä A
<br />
Järjestelmä B
<br />
Järjestelmä C
</TableCell>
<TableCell>
<IconEdit color={COLOR_KELA_BLUE_60} size="s" />
</TableCell>
<TableCell />
</TableRow>
<TableRow>
<TableCell>
<Link href="#">789</Link>
</TableCell>
<TableCell>
Pykälä on virheellinen. Tarkista, että pykälässä on vähintään yksi numero ja enintään yksi kirjain, yhteensä
enintään 3 merkkiä.
</TableCell>
<TableCell />
<TableCell />
<TableCell className="kds-whitespace-nowrap">
<Badge className="kds-mr-1" variant="success" /> Tuotannossa
</TableCell>
<TableCell>
Käyttöliittymätekstit
<br />
Järjestelmä A
<br />
Järjestelmä B
<br />
Järjestelmä C
</TableCell>
<TableCell>
<IconEdit color={COLOR_KELA_BLUE_60} size="s" />
</TableCell>
<TableCell />
</TableRow>
<TableRow>
<TableCell>
<Link href="#">012</Link>
</TableCell>
<TableCell>Virheellinen alkamispäivä.</TableCell>
<TableCell />
<TableCell />
<TableCell className="kds-whitespace-nowrap">
<Badge className="kds-mr-1" variant="success" /> Tuotannossa
</TableCell>
<TableCell>
Käyttöliittymätekstit
<br />
Järjestelmä A
<br />
Järjestelmä B
<br />
Järjestelmä C
</TableCell>
<TableCell>
<IconEdit color={COLOR_KELA_BLUE_60} size="s" />
</TableCell>
<TableCell />
</TableRow>
</TableBody>
</Table>
);
render(<TableExample />);