Data Table

Komponents, kas attēlo datus tabulārajā displejā. Izstrādāts uz react-table.

Iespējas

• data | (array|object) (required): Pārskatāmais datu objekts vai masīvs. Ja tas ir objekts, atslēgas atbilst kolonnu vērtībām, bet masīvs būs objektu masīvs ar nosauktu lauku, kas atbilst katrai kolonnai.. Default: none.
• dataInfo | object: objekts ar info virkņu masīvu, kas apraksta datu kopu, datu kopas nosaukumu, mainīgo objektu ar mainīgo nosaukumu atslēgām un mainīgo aprakstu vērtībām, showOnStartup boolean, kas kontrolē, vai palaišanas laikā tiek parādīts informācijas modāls.. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: kontrolē, vai kolonnām, kurām nav info, ir poga, kas pēc noklikšķināšanas izsauc onColumnDelete izsaukuma funkciju.. Default: false.
• undeletableVars | array<string>: to kolonnu mainīgo nosaukumu masīvs, kuras nedrīkst dzēst.. Default: [].
• filterable | boolean: kontrolē, vai kolonnas ir filtrējamas.. Default: true.
• editable | array: rediģējamo kolonnu nosaukumu masīvs. Default: [].
• getTrProps | function: atsauces funkcija, kas tiek izpildīta katrai rindai, lai pielāgotu tās stilu (nodota tabulas stāvoklis, rindas informācija, sleja un tabulas instance). Default: none.
• onColumnDrag | function: funkcija, kas tiek izsaukta, kad sleja ir pārvilkta uz citu pozīciju.. Default: onColumnDrag() {}.
• onColumnDelete | function: funkcija, kas tiek izsaukta ar kolonnas nosaukumu, kad ir noklikšķināts uz attiecīgās kolonnas dzēšanas pogas.. Default: onColumnDelete() {}.
• onColumnNameChange | function: funkcija, kas tiek izsaukta, ja kolonnas nosaukums ir mainīts (tiek izsaukta ar veco nosaukumu kā pirmo un jauno nosaukumu kā otro argumentu).. Default: onColumnNameChange() {}.
• onClickRemove | function: funkcija, kas norāda darbību, kas jāveic attiecībā uz rindām, kuras izņemtas no datiem (noklusējuma iestatījumi ir tukša funkcija).. Default: onClickRemove() {}.
• onEdit | function: funkcija, kas tiek izsaukta ar atjauninātu datu kopu pēc tam, kad lietotājs ir mainījis šūnas vērtību (attiecas tikai tad, ja tabula ir rediģējama).. Default: onEdit() {}.
• onTutorialCompletion | function: funkcija, kas tiek izsaukta, kad lietotājs ir pabeidzis datu tabulas pamācību.. Default: onTutorialCompletion() {}.
• filters | array: filtru masīvs. Default: [].
• onFilteredChange | function: funkcija, kas tiek izsaukta ar pašreizējiem filtriem pēc tam, kad datus ir filtrējis lietotājs.. Default: onFilteredChange() {}.
• showRemove | boolean: norāda, vai attīrāmajām rindām ir jānorāda izvēles rūtiņas.. Default: false.
• showIdColumn | boolean: kontrolē, vai tiek rādīta ID sleja.. Default: true.
• disableDownload | boolean: vai slēpt pogu, lai datus lejupielādētu CSV vai JSON faila veidā.. Default: false.
• className | string: klases nosaukums. Default: ''.
• style | object: Objekts, kas ļauj pielāgot css stilu. Noklusējuma noklusējuma vērtība ir tukšs objekts. Default: {}.

Piemēri

Tiešraides redaktors

<DataTable showRemove onClickRemove={( data ) => { console.log(data); }} data={{ firstName: [ 'Hans', 'Lotti', 'Fritz' ], lastName: [ 'Bauer', 'Müller', 'Schultz' ], age: [ 37, 55, 62 ] }} style={{ width: 600 }} />

<DataTable
    showRemove
    onClickRemove={( data ) => { console.log(data); }}
    data={{ 
        firstName: [ 'Hans', 'Lotti', 'Fritz' ], 
        lastName: [ 'Bauer', 'Müller', 'Schultz' ],
        age: [ 37, 55, 62 ]
    }}
    style={{ width: 600 }}
/>

Rezultāts

ReferenceError: Provider is not defined