Renderöinti

Renderöijä määrittää, miten sarakkeen jokainen solu näytetään. Raaka-arvon näyttämisen sijaan renderöijä muuntaa kunkin solun tiedot tyylitellyksi tekstiksi, kuvakkeiksi, tunnisteiksi, linkeiksi, toimintopainikkeiksi tai muuksi visuaaliseksi esitystavaksi, joka auttaa lukemaan tietoja nopeammin ja käyttämään niitä helpommin.

Renderöinti tapahtuu kokonaan selaimessa. Palvelin lähettää raakadataa, ja asiakaspuoli huolehtii esitystavasta, joten Table on nopea rivien määrästä riippumatta.

Määritä renderöijä sarakkeelle käyttämällä setRenderer()-metodia. Renderöijää käytetään samalla tavalla sarakkeen kaikissa soluissa:

TextRenderer<MusicRecord> renderer = new TextRenderer<>();
renderer.setTheme(Theme.PRIMARY);

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

Renderöijät ja arvontarjoajat

Jos sinun tarvitsee vain muuntaa tai muotoilla solun arvo luomatta DOM-rakennetta, käytä sen sijaan arvontarjoajaa. Renderöijät luovat ylimääräisiä DOM-elementtejä jokaiselle renderöitävälle riville, mikä lisää renderöinnin kustannuksia. Käytä renderöijiä visuaalisiin esityksiin, kuten kuvakkeisiin, tunnisteisiin, painikkeisiin tai muuhun HTML-pohjaiseen esitystapaan.

webforJ sisältää valmiita renderöijiä yleisimpiin käyttötarkoituksiin. Jos sovelluksesi tarvitsee jotain erityistä, laajenna Renderer-luokkaa ja toteuta build()-metodi, joka palauttaa lodash-mallimerkkijonon. Se suoritetaan selaimessa jokaiselle solulle.

Yleiset renderöijät

Seuraavissa esimerkeissä käydään läpi neljä usein käytettyä renderöijää ja näytetään setRenderer()-käyttötapa käytännössä.

TextRenderer

Näyttää solun sisällön tavallisena tai tyyliteltynä tekstinä. Käytä sarakkeessa teemaväriä tai tekstikorostusta muuttamatta sen rakennetta. Voit esimerkiksi korostaa prioriteettikentän punaisella tai lihavoida tärkeän tunnisteen.

TextRenderer<MusicRecord> renderer = new TextRenderer<>();
renderer.setTheme(Theme.PRIMARY);
renderer.setDecorations(EnumSet.of(TextDecoration.BOLD));

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

BadgeRenderer

Näyttää solun arvon tunniste-elementin sisällä. Tukee teemoja, laajuuksia, värien automaattista määritystä (eri väri kullekin yksilölliselle arvolle) ja valinnaista edellä näytettävää kuvaketta. Käytä sitä luokitteleville arvoille, kuten tunnisteille, tyypeille tai nimikkeille, joiden visuaalisesti erottuvat tunnisteet helpottavat rivien nopeaa silmäilyä ja vertailua.

BadgeRenderer<MusicRecord> renderer = new BadgeRenderer<>();
renderer.setTheme(BadgeTheme.PRIMARY);

table.addColumn("musicType", MusicRecord::getMusicType).setRenderer(renderer);

BooleanRenderer

Korvaa arvot true, false ja null kuvakkeilla. Käytä sitä true/false-sarakkeissa, joissa kuvake ilmaisee arvon tekstiä nopeammin, kuten ominaisuuslipuissa, aktiivisuus- ja passiivisuustiloissa tai suostumuskentissä.

// Default icons
BooleanRenderer<Task> renderer = new BooleanRenderer<>();
table.addColumn("completed", Task::isCompleted).setRenderer(renderer);

// Custom icons
BooleanRenderer<Task> custom = new BooleanRenderer<>(
  TablerIcon.create("thumb-up").setTheme(Theme.SUCCESS),
  TablerIcon.create("thumb-down").setTheme(Theme.DANGER)
);
table.addColumn("completed", Task::isCompleted).setRenderer(custom);

CurrencyRenderer

Muotoilee numeerisen arvon valuuttasummaksi annetun Locale-olion sääntöjen mukaan. Käytä sitä rahasarakkeissa, joissa tarvitaan alueasetusten mukaista muotoilua (valuuttasymboli, erottimet ja desimaalit).

// US dollars
table.addColumn("cost", MusicRecord::getCost)
     .setRenderer(new CurrencyRenderer<>(Locale.US));

// Euros with German locale
table.addColumn("retail", MusicRecord::getRetail)
     .setRenderer(new CurrencyRenderer<>(Locale.GERMANY));

Ehdollinen renderöinti

ConditionalRenderer valitsee solulle renderöijän solun arvon perusteella. Ehdot tarkistetaan järjestyksessä, ja ensimmäinen täsmäävä ehto valitaan. otherwise()-metodilla voi määrittää oletusvaihtoehdon.

Seuraavassa esimerkissä ehdollista renderöintiä käytetään laskun tilan sarakkeessa, jossa BadgeRenderer-versio valitaan arvon perusteella:

Ehdollinen renderöinti sopii myös numeerisiin raja-arvoihin. Tämä palvelimen hallintapaneeli käyttää ConditionalRenderer-renderöijää vaihtaakseen ProgressBarRenderer-renderöijän teemaa suorittimen ja muistin käytön mukaan:

Ehtojen API

Ehdot luodaan staattisilla tehdasmetodeilla, ja niitä voidaan yhdistellä metodeilla and(), or() ja negate().

// Value equality
Condition.equalTo("active")
Condition.equalToIgnoreCase("active")
Condition.in("active", "pending", "new")

// Numeric comparisons
Condition.greaterThan(100)
Condition.lessThanOrEqual(0)
Condition.between(10, 50)

// Boolean / emptiness
Condition.isTrue()
Condition.isFalse()
Condition.isEmpty()

// String matching
Condition.contains("error")
Condition.containsIgnoreCase("warn")

// Composition
Condition.greaterThan(0).and(Condition.lessThan(100))
Condition.isEmpty().or(Condition.equalTo("N/A"))
Condition.isTrue().negate()

// Cross-column check
Condition.column("status").equalTo("active")

// Raw JavaScript expression
Condition.expression("cell.value % 2 === 0")

Yhdistelmärenderöinti

CompositeRenderer yhdistää useita renderöijiä vierekkäin samaan soluun flex-asettelun avulla. Käytä sitä esimerkiksi kuvakkeen ja tekstin yhdistämiseen, avatarin näyttämiseen nimen vieressä tai tunnisteen sijoittamiseen tilailmaisimen viereen.

Alla oleva työntekijähakemisto käyttää Employee-sarakkeessa CompositeRenderer-renderöijää, joka näyttää automaattisesti luodun avatarin työntekijän nimen vieressä:

Mukautetut renderöijät

Jos mikään valmis renderöijä ei sovi käyttötarkoitukseesi, laajenna Renderer-luokkaa ja toteuta build()-metodi. Metodi palauttaa lodash-mallimerkkijonon, joka suoritetaan selaimessa sarakkeen jokaiselle solulle. Merkkijono sisältää HTML:ää ja JavaScriptiä.

Mukautetun renderöijän luominen

Vaihe 1: Laajenna Renderer-luokkaa ja määritä rivin tietotyyppi.

public class RatingRenderer extends Renderer<MusicRecord> {

Vaihe 2: Korvaa build()-metodi ja palauta lodash-mallimerkkijono.

  @Override
  public String build() {
    return /* html */"""
      <%
        const rating = Number(cell.value);
        const stars  = Math.round(Math.min(Math.max(rating, 0), 5));
        const full   = '★'.repeat(stars);
        const empty  = '☆'.repeat(5 - stars);
      %>
      <span><%= full %><%= empty %></span>
      <span style="color: var(--dwc-color-body-text)">(<%= rating.toFixed(1) %>)</span>
    """;
  }
}

Vaihe 3: Määritä renderöijä sarakkeelle.

table.addColumn("rating", MusicRecord::getRating)
     .setRenderer(new RatingRenderer());

vinkki

Lisätietoja Lodash-syntaksin käytöstä solun tietojen lukemiseen ja havainnollisten renderöijien luomiseen on tässä viiteosiossa.

Useiden sarakkeiden tietojen käyttö

Lue mallissa vierekkäisten sarakkeiden arvoja käyttämällä cell.row.getValue("columnId")-metodia. Tämä on hyödyllistä kenttien yhdistämisessä, erotusten laskemisessa tai toisiinsa liittyvien tietojen vertailussa.

public class ArtistAvatarRenderer extends Renderer<MusicRecord> {
  @Override
  public String build() {
    return /* html */"""
      <%
        const name     = cell.row.getValue("artist");
        const initials = name
          ? name.split(' ').map(w => w.charAt(0)).join('').substring(0, 2).toUpperCase()
          : '?';
      %>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 28px; height: 28px; border-radius: 50%;
          background: var(--dwc-color-primary); color: white;
          display: flex; align-items: center; justify-content: center;
          font-size: 11px; font-weight: 600;">
          <%= initials %>
        </div>
        <span><%= name %></span>
      </div>
    """;
  }
}

Napsautustapahtumat

IconButtonRenderer ja ButtonRenderer tarjoavat valmiina addClickListener()-metodin. Napsautustapahtumasta pääsee rivin tieto-olioon e.getItem()-metodilla.

IconButtonRenderer<MusicRecord> deleteBtn = new IconButtonRenderer<>(
  TablerIcon.create("trash").setTheme(Theme.DANGER)
);
deleteBtn.addClickListener(e -> {
  MusicRecord record = e.getItem();
  repository.delete(record);
  table.refresh();
});

table.addColumn("delete", r -> "").setRenderer(deleteBtn);

Suorituskyky: laiska renderöinti 25.12

Jos sarakkeissa käytetään raskaita renderöijiä, kuten tunnisteita, edistymispalkkeja, avatareja tai verkkokomponentteja, laiskan renderöinnin käyttöönotto parantaa vierityksen suorituskykyä.

table.addColumn("status", Order::getStatus)
     .setRenderer(new BadgeRenderer<>())
     .setLazyRender(true);

Kun sarakkeelle asetetaan setLazyRender(true), solussa näkyy kevyt animoitu paikkamerkki käyttäjän vierittäessä. Solun varsinainen sisältö renderöidään, kun vieritys pysähtyy. Asetus koskee yksittäistä saraketta, joten voit ottaa sen käyttöön vain niissä sarakkeissa, jotka siitä hyötyvät.

Milloin laiska renderöinti kannattaa ottaa käyttöön

Solujen renderöijät luovat DOM:iin lisää elementtejä, mikä lisää suorittimen kuormitusta renderöinnin aikana renderöijän tyypistä riippumatta.

Laiska renderöinti voi vähentää suorituskykyhaittoja, kun renderöijää todella tarvitaan. Jos sinun tarvitsee vain muuttaa tai muotoilla arvoa etkä luo monimutkaista DOM-rakennetta, muunna arvo sen sijaan arvontarjoajalla.

Valmiiden renderöijien viite

webforJ sisältää kattavan valikoiman renderöijiä yleisimpiin käyttötarkoituksiin. Määritä mikä tahansa niistä sarakkeelle käyttämällä column.setRenderer(renderer)-metodia.

Teksti ja tunnisteet

TextRenderer - tyylitelty teksti, valinnainen teema ja tekstikorostukset

25.12

Näyttää solun sisällön tavallisena tai tyyliteltynä tekstinä. Tukee teemavärejä ja tekstikorostuksia, kuten lihavointia, kursivointia ja alleviivausta.

TextRenderer renderer = new TextRenderer<>();
renderer.setTheme(Theme.PRIMARY);
renderer.setDecorations(EnumSet.of(TextDecoration.BOLD));

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

BadgeRenderer - arvo tunnistesirun sisällä

25.12

BadgeRenderer renderer = new BadgeRenderer<>();
renderer.setTheme(BadgeTheme.PRIMARY);

table.addColumn("musicType", MusicRecord::getMusicType).setRenderer(renderer);

NullRenderer - paikkamerkki null- tai tyhjille arvoille

25.12

Renderöi määritettävän oletustekstin, kun solun arvo on null tai tyhjä. Muussa tapauksessa arvo renderöidään sellaisenaan.

table.addColumn("notes", MusicRecord::getNotes)
     .setRenderer(new NullRenderer<>("N/A"));

Tila ja ilmaisimet

BooleanRenderer - true-, false- ja null-arvot kuvakkeina

25.12

Korvaa arvot true, false ja null kuvakkeilla. Oletuskuvakkeet ovat valintamerkki, risti ja viiva.

// Default icons
BooleanRenderer renderer = new BooleanRenderer<>();
table.addColumn("completed", Task::isCompleted).setRenderer(renderer);

// Custom icons
BooleanRenderer custom = new BooleanRenderer<>(
  TablerIcon.create("thumb-up").setTheme(Theme.SUCCESS),
  TablerIcon.create("thumb-down").setTheme(Theme.DANGER)
);

StatusDotRenderer - värillinen ilmaisinpiste solun tekstin vieressä

25.12

Renderöi pienen värillisen pisteen solun arvon vasemmalle puolelle. Yhdistä yksittäiset arvot teemoihin, CSS-värimerkkijonoihin tai java.awt.Color-olioihin.

StatusDotRenderer renderer = new StatusDotRenderer<>();
renderer.addMapping("Active",    Theme.SUCCESS);
renderer.addMapping("Pending",   Theme.WARNING);
renderer.addMapping("Cancelled", Theme.DANGER);

table.addColumn("status", Order::getStatus).setRenderer(renderer);

Luvut, valuutat ja päivämäärät

CurrencyRenderer - alueasetukset huomioiva valuuttamuotoilu

25.12

Muotoilee numeerisen arvon valuuttasummaksi annetun Locale-olion sääntöjen mukaan.

// US dollars
table.addColumn("cost", MusicRecord::getCost)
     .setRenderer(new CurrencyRenderer<>(Locale.US));

// Euros with German locale
table.addColumn("retail", MusicRecord::getRetail)
     .setRenderer(new CurrencyRenderer<>(Locale.GERMANY));

PercentageRenderer - prosenttiosuus ja valinnainen pieni edistymispalkki

25.12

Näyttää numeerisen arvon prosenttiosuutena. Aseta konstruktorin toiseksi argumentiksi false, jos et halua ohutta edistymispalkkia tekstin alle.

PercentageRenderer renderer = new PercentageRenderer<>(Theme.PRIMARY, true);
table.addColumn("completion", Task::getCompletion).setRenderer(renderer);

ProgressBarRenderer - täysikokoinen edistymispalkki numeerisille arvoille

25.12

Renderöi koko levyisen edistymispalkin, jonka pienimmät ja suurimmat raja-arvot voi määrittää. Tukee määrittämätöntä tilaa sekä raidallista tai animoitua esitystapaa. Voit sijoittaa palkin päälle mukautettua tekstiä käyttämällä setText()-metodia ja lodash-lauseketta.

ProgressBarRenderer renderer = new ProgressBarRenderer<>();
renderer.setMax(100);
renderer.setTheme(Theme.SUCCESS);
renderer.setTextVisible(true);
renderer.setText("<%= cell.value %>/100");

table.addColumn("progress", Task::getProgress).setRenderer(renderer);

MaskedTextRenderer - merkkijono tekstimaskilla muotoiltuna

25.12

Käyttää merkkijonoarvoon merkkimaskia. # vastaa mitä tahansa numeroa; kirjaimelliset merkit säilytetään. Katso kaikki tuetut maskimerkit kohdasta tekstimaskin säännöt.

table.addColumn("ssn", Employee::getSsn)
     .setRenderer(new MaskedTextRenderer<>("###-##-####"));

MaskedNumberRenderer - numeerinen arvo lukumaskilla muotoiltuna

25.12

Muotoilee numeerisen arvon mallimerkkijonon avulla ja huomioi alueasetusten mukaiset erottimet. 0 pakottaa numeron näkymään; # on valinnainen. Katso kaikki tuetut maskimerkit kohdasta lukumaskin säännöt.

table.addColumn("price", Product::getPrice)
     .setRenderer(new MaskedNumberRenderer<>("###,##0.00", Locale.US));

MaskedDateTimeRenderer - päivämäärä- tai aika-arvo päivämäärämaskilla

25.12

Muotoilee päivämäärä- tai aika-arvon mallimerkintöjen avulla: %Mz (kuukausi), %Dz (päivä), %Yz (vuosi) ja muita. Katso kaikki käytettävissä olevat merkinnät kohdasta päivämäärämaskin säännöt.

table.addColumn("released", MusicRecord::getReleaseDate)
     .setRenderer(new MaskedDateTimeRenderer<>("%Mz/%Dz/%Yz"));

Linkit ja media

EmailRenderer - sähköpostiosoite napsautettavana mailto-linkkinä

25.12

Lisää solun arvon ympärille mailto:-ankkurin. Oletuksena visuaalisena vihjeenä on pääteeman mukainen sähköpostikuvake.

// Default mail icon
table.addColumn("email", Contact::getEmail)
     .setRenderer(new EmailRenderer<>());

// Custom icon
table.addColumn("email", Contact::getEmail)
     .setRenderer(new EmailRenderer<>(TablerIcon.create("at")));

PhoneRenderer - puhelinnumero napsautettavana tel-linkkinä

25.12

Lisää solun arvon ympärille tel:-ankkurin. Mobiililaitteessa napautus avaa numerovalitsimen. Oletuksena näytetään pääteeman mukainen puhelinkuvake.

// Default phone icon
table.addColumn("phone", Contact::getPhone)
     .setRenderer(new PhoneRenderer<>());

// Custom icon
table.addColumn("phone", Contact::getPhone)
     .setRenderer(new PhoneRenderer<>(TablerIcon.create("device-mobile")));

AnchorRenderer - solun arvo mukautettavana hyperlinkkinä

25.12

Renderöi napsautettavan ankkurielementin. href tukee lodash-mallilausekkeita, joten voit muodostaa URL-osoitteita dynaamisesti solun arvosta.

AnchorRenderer renderer = new AnchorRenderer<>();
renderer.setHref("https://www.google.com/search?q=<%= cell.value %>");
renderer.setTarget("_blank");

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

ImageRenderer - solun sisäinen kuva

25.12

Näyttää kuvan. src-attribuutti tukee lodash-mallilausekkeita, joten kullekin riville voidaan näyttää eri kuva.

ImageRenderer renderer = new ImageRenderer<>();
renderer.setSrc("https://placehold.co/40x40?text=<%= cell.value %>");
renderer.setAlt("Cover");

table.addColumn("cover", MusicRecord::getArtist).setRenderer(renderer);

Henkilöt ja avatarit

AvatarRenderer - avatar, jonka nimikirjaimet luodaan automaattisesti

25.12

Renderöi avatar-komponentin. Nimikirjaimet johdetaan automaattisesti solun arvosta. Tukee teemoja ja varakuvaketta.

AvatarRenderer renderer = new AvatarRenderer<>();
renderer.setTheme(AvatarTheme.PRIMARY);
renderer.setIcon(TablerIcon.create("user"));

table.addColumn("artist", MusicRecord::getArtist).setRenderer(renderer);

Kuvakkeet ja toiminnot

IconRenderer - yksittäinen kuvake, joka voi olla napsautettava

24.00

Renderöi yksittäisen kuvakkeen. Lisää napsautuskuuntelija vuorovaikutteista toimintaa varten.

IconRenderer renderer = new IconRenderer<>(TablerIcon.create("music"));
table.addColumn("type", MusicRecord::getMusicType).setRenderer(renderer);

IconButtonRenderer - toimintokuvakepainike, joka voi käyttää rivin tietoja

25.12

Renderöi napsautettavan kuvakepainikkeen. Napsautustapahtumasta pääsee rivin alkioon e.getItem()-metodilla, joten se sopii erinomaisesti rivikohtaisiin toimintoihin.

IconButtonRenderer renderer = new IconButtonRenderer<>(TablerIcon.create("edit"));
renderer.addClickListener(e -> openEditor(e.getItem()));

table.addColumn("actions", r -> "").setRenderer(renderer);

ButtonRenderer - teeman mukainen painike solussa

24.00

Renderöi solun sisälle täysikokoisen Button-komponentin.

ButtonRenderer renderer = new ButtonRenderer<>("Edit");
renderer.setTheme(ButtonTheme.PRIMARY);
renderer.addClickListener(e -> openEditor(e.getItem()));

table.addColumn("edit", r -> "Edit").setRenderer(renderer);

ElementRenderer - raaka HTML-elementti, jonka sisältö muodostetaan Lodashilla

24.00

Renderöi minkä tahansa HTML-elementin, jonka sisältö annetaan lodash-mallimerkkijonona. Tätä voi käyttää tilanteissa, joihin mikään valmis renderöijä ei sovi.

ElementRenderer renderer = new ElementRenderer<>("span", "<%= cell.value %>");
table.addColumn("custom", MusicRecord::getTitle).setRenderer(renderer);

Mallien viite

Renderöijät tarjoavat tehokkaan tavan mukauttaa tietojen näyttämistä Table-komponentissa. Keskeinen Renderer-luokka on tarkoitettu laajennettavaksi, jotta voit luoda lodash-malleihin perustuvia mukautettuja renderöijiä. Näin sisältöä voidaan renderöidä dynaamisesti ja vuorovaikutteisesti.

Lodash-mallien avulla HTML:ää voidaan lisätä suoraan taulukon soluihin, joten ne sopivat hyvin monimutkaisten solutietojen esittämiseen Table-komponentissa. Tällä menetelmällä HTML voidaan luoda dynaamisesti solun tietojen perusteella, mikä mahdollistaa monipuolisen ja vuorovaikutteisen solusisällön.

Lodash-syntaksi

Seuraavassa osiossa esitellään Lodash-syntaksin perusteet. Tämä ei ole kattava yleiskatsaus, mutta sen avulla pääset alkuun Lodashin käytössä Table-komponentissa.

Lodash-mallien syntaksin yleiskatsaus:

<%= ... %> - Interpoloi arvot lisäämällä malliin JavaScript-koodin tuloksen.
<% ... %> - Suorittaa JavaScript-koodia, mikä mahdollistaa silmukat, ehdot ja muuta.
<%- ... %> - Escapettaa HTML-sisällön ja suojaa näin interpoloidut tiedot HTML-injektiolta.

Solutietojen käyttöesimerkkejä:

1. Yksinkertainen arvon interpolointi: näytä solun arvo suoraan.

<%= cell.value %>

2. Ehdollinen renderöinti: käytä JavaScript-logiikkaa sisällön ehdolliseen renderöintiin.

<% if (cell.value > 100) { %> 'High' <% } else { %> 'Normal' <% } %>

3. Tietokenttien yhdistäminen: renderöi sisältöä käyttämällä solun useita tietokenttiä.

<%= cell.row.getValue('firstName') + ' ' + cell.row.getValue('lastName') %>

4. HTML-sisällön escapettaminen: renderöi käyttäjän luoma sisältö turvallisesti.

Renderöijällä on asiakaspuolella käytettävissään solun, rivin ja sarakkeen yksityiskohtaiset ominaisuudet:

TableCell-ominaisuudet:

Ominaisuus	Tyyppi	Kuvaus
column	`TableColumn`	Soluun liittyvä sarakeolio.
first	`boolean`	Ilmaisee, onko solu rivin ensimmäinen.
id	`String`	Solun tunniste.
index	`int`	Solun indeksi rivillään.
last	`boolean`	Ilmaisee, onko solu rivin viimeinen.
row	`TableRow`	Soluun liittyvä riviolio.
value	`Object`	Solun raaka-arvo suoraan tietolähteestä.

TableRow-ominaisuudet:

Ominaisuus	Tyyppi	Kuvaus
cells	`TableCell[]`	Rivin solut.
data	`Object`	Sovelluksen riville antamat tiedot.
even	`boolean`	Ilmaisee, onko rivi parillinen (tyylittelyä varten).
first	`boolean`	Ilmaisee, onko rivi taulukon ensimmäinen.
id	`String`	Rivin yksilöllinen tunniste.
index	`int`	Rivin indeksi.
last	`boolean`	Ilmaisee, onko rivi taulukon viimeinen.
odd	`boolean`	Ilmaisee, onko rivi pariton (tyylittelyä varten).

TableColumn-ominaisuudet:

Ominaisuus	Tyyppi	Kuvaus
align	ColumnAlignment	Sarakkeen tasaus (vasen, keskitetty, oikea).
id	String	Riviolion kenttä, josta solun tiedot haetaan.
label	String	Sarakkeen otsikossa näytettävä nimi.
pinned	ColumnPinDirection	Sarakkeen kiinnityssuunta (vasen, oikea, automaattinen).
sortable	boolean	Jos arvo on true, sarake voidaan lajitella.
sort	SortDirection	Lajittelujärjestys.
type	ColumnType	Sarakkeen tyyppi (teksti, numero, totuusarvo jne.).
minWidth	number	Sarakkeen vähimmäisleveys pikseleinä.