Data Table

Komponentas, atvaizduojantis duomenis lentelių pavidalu. Sukurtas ant react-table.

Parinktys

• data | (array|object) (required): Peržiūrimas duomenų objektas arba masyvas. Jei tai objektas, raktai atitinka stulpelių reikšmes, o iš masyvo tikimasi gauti objektų masyvą, kuriame kiekvienam stulpeliui atitinka pavadintas laukas.. Default: none.
• dataInfo | object: objektas, kuriame yra info eilutės masyvas, apibūdinantis duomenų rinkinį, duomenų rinkinio pavadinimas, kintamųjų objektas, kurio raktai atitinka kintamųjų pavadinimus, o reikšmės - kintamųjų aprašymus, ir showOnStartup loginis veiksnys, kontroliuojantis, ar paleidimo metu turi būti rodomas informacinis modalinis langas.. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: kontroliuoja, ar stulpeliai, kuriems nėra info, turi mygtuką, kurį paspaudus iškviečiama onColumnDelete grįžtamojo ryšio funkcija.. Default: false.
• undeletableVars | array<string>: stulpelių, kurių negalima ištrinti, kintamųjų vardų masyvas. Default: [].
• filterable | boolean: kontroliuoja, ar stulpelius galima filtruoti.. Default: true.
• editable | array: redaguojamų stulpelių pavadinimų masyvas. Default: [].
• getTrProps | function: atšaukimo funkcija, vykdoma kiekvienai eilutei, kad būtų pritaikytas jos stilius (perduota lentelės būsena, eilutės informacija, stulpelis ir lentelės egzempliorius). Default: none.
• onColumnDrag | function: funkcija, iškviečiama, kai stulpelis vilkiamas į kitą padėtį. Default: onColumnDrag() {}.
• onColumnDelete | function: funkcija, iškviečiama su stulpelio pavadinimu, kai paspaudžiamas atitinkamas stulpelio šalinimo mygtukas.. Default: onColumnDelete() {}.
• onColumnNameChange | function: funkcija, iškviečiama pakeitus stulpelio pavadinimą (iškviečiama, kai pirmasis argumentas yra senasis pavadinimas, o antrasis - naujasis pavadinimas).. Default: onColumnNameChange() {}.
• onClickRemove | function: funkcija, nurodanti veiksmą, kurį reikia atlikti iš duomenų pašalintoms eilutėms (numatytoji reikšmė - tuščia funkcija).. Default: onClickRemove() {}.
• onEdit | function: funkcija, iškviečiama su atnaujintu duomenų rinkiniu po to, kai naudotojas pakeitė langelio reikšmę (taikoma tik tada, kai lentelė yra redaguojama).. Default: onEdit() {}.
• onTutorialCompletion | function: funkcija, iškviečiama, kai naudotojas baigia duomenų lentelės vadovėlį.. Default: onTutorialCompletion() {}.
• filters | array: filtrų masyvas. Default: [].
• onFilteredChange | function: funkcija, iškviečiama su dabartiniais filtrais po to, kai duomenis filtravo naudotojas. Default: onFilteredChange() {}.
• showRemove | boolean: nurodo, ar rodyti pašalintinų eilučių žymimuosius langelius.. Default: false.
• showIdColumn | boolean: kontroliuoja, ar rodyti ID stulpelį.. Default: true.
• disableDownload | boolean: ar paslėpti mygtuką, skirtą duomenims atsisiųsti CSV arba JSON failo pavidalu.. Default: false.
• className | string: klasės pavadinimas. Default: ''.
• style | object: Objektas, leidžiantis naudoti pasirinktinį css stilių. Numatytoji reikšmė - tuščias objektas. Default: {}.

Pavyzdžiai

Tiesioginis redaktorius

<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 }}
/>

Rezultatas

ReferenceError: Provider is not defined