Премини към основното съдържание

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: {}.

Примери

Редактор в реално време
Резултат
ReferenceError: Provider is not defined