Data Table

Компонент, който визуализира данни в табличен вид. Изграден върху react-table.

Опции

data | (array|object) (required): Обект или масив от данни, който трябва да се прегледа. Ако е обект, ключовете съответстват на стойностите на колоните, докато при масив се очаква масив от обекти с именувано поле, съответстващо на всяка колона.. Default: none.
dataInfo | object: обект с info масив от низове, описващ набора от данни, името на набора от данни, обект от променливи с ключове, съответстващи на имената на променливите, и стойности на описанията на променливите, както и булев showOnStartup, контролиращ дали да се покаже информационният модал при стартиране. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
deletable | boolean: контролира дали колоните, за които не съществува инфо, имат бутон, който при щракване извиква функцията за обратна връзка onColumnDelete.. Default: false.
undeletableVars | array<string>: масив от имена на променливи на колони, които не могат да се изтриват. Default: [].
filterable | boolean: контролира дали колоните могат да се филтрират.. Default: true.
editable | array: масив от имена на колони, които могат да се редактират. Default: [].
getTrProps | function: функция за обратно извикване, изпълнявана за всеки ред, за да се персонализира стилът му (предадени са състояние на таблицата, информация за реда, колона и инстанцията на таблицата). Default: none.
onColumnDrag | function: функция, задействана при плъзгане на колона до различна позиция. Default: onColumnDrag() {}.
onColumnDelete | function: функция, извикана с името на колона, когато е щракнат съответният бутон за изтриване на колона. Default: onColumnDelete() {}.
onColumnNameChange | function: функция, която се извиква при преименуване на колона (извиква се със старото име като първи и новото име като втори аргумент). Default: onColumnNameChange() {}.
onClickRemove | function: функция, указваща действието, което да се предприеме за редовете, премахнати от данните (по подразбиране е празна функция). Default: onClickRemove() {}.
onEdit | function: функция, извикана с актуализирания набор от данни, след като потребителят е променил стойността на дадена клетка (прилага се само когато таблицата е редактируема). Default: onEdit() {}.
onTutorialCompletion | function: функция, задействана, когато потребителят е завършил урока за таблицата с данни. Default: onTutorialCompletion() {}.
filters | array: масив от филтри. Default: [].
onFilteredChange | function: функция, извикана с текущите филтри, след като данните са били филтрирани от потребителя. Default: onFilteredChange() {}.
showRemove | boolean: указва дали да се показват квадратчета за отметка за редовете, които трябва да се премахнат.. Default: false.
showIdColumn | boolean: контролира дали да се показва колона ID. Default: true.
disableDownload | boolean: дали да се скрие бутонът за изтегляне на данните като CSV или JSON файл. Default: false.
className | string: име на класа. Default: ''.
style | object: Обект, позволяващ персонализирано стилизиране на CSS. По подразбиране е празен обект. Default: {}.

Примери

Редактор в реално време

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

Резултат

ReferenceError: Provider is not defined

Опции​

Примери​

Опции

Примери