...
DataTable a ThemedDataTable
Tabuľkové komponenty DataTable a ThemedDataTable (DataTable naštýlovaná CSS štýlmi) Tabuľková komponenta Table v sebe zabaľujú zabaľuje knižnicu DataTables. Rozhranie tejto knižnice rozširujú rozširuje o nasledovné atribúty:
| Názov atribútu | Typ | Povinný | Predvolená hodnota | Popis |
|---|---|---|---|---|
| className | string | Názov CSS triedy, ktorá bude aplikovaná na hlavný HTML element zobrazujúci tabuľku. | ||
| style | object | CSS štýl, ktorý bude aplikovaný na hlavný HTML element zobrazujúci tabuľku. | ||
| width | string | Šírka tabuľky. | ||
| height | string | Výška tabuľky. | ||
| renderFooter | bool | false | Príznak či názvy stĺpcov budú zobrazené aj v pätičke tabuľky. |
...
| Blok kódu | ||
|---|---|---|
| ||
import React from 'react'
import {DataContainer} from '../custom/components'
import Table from 'framework/components/table/themedDataTable'
// verzia komponentu bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
// import Table from 'framework/components/table/dataTable'
// Príklad použitia komponentu ThemedDataTable, ktorý načítavá dáta volaním RPC
DataContainer.renderComponent(class IndexPage extends React.Component {
async loadData(data, callback, settings) {
const d2Api = this.props.d2;
const response = await d2Api.rpc("E.SmartWebApiTutorial", "GetPersonData", 1000, {
type: 'record',
structType: 'SD.Arr_Person',
returnAs: 'vysledok',
value: []
}).call();
callback({
data: response.vysledok,
recordsTotal: response.vysledok.length
});
}
render() {
return (
<div>
<Table className="table table-striped table-bordered dt-responsive nowrap dataTable" width="100%"
ajax = {(data, callback, settings) => {
this.loadData(data, callback, settings);
}}
columns = {[
{title: "Meno", data: "meno.value"},
{title: "Vek", data: "vek.value"}
]}
select={true}
ref = {(component) => {
this.table = component;
}}/>
</div>
);
}
}); |
...