Data Table

Komponent renderujący dane w formie tabelarycznej. Wbudowany na górze [tabela reaktywna] (https://react-table.js.org/).

Opcje

• data | (array|object) (required): Obiekt lub tablica danych, które mają być przeglądane. Jeśli jest to obiekt, to klucze odpowiadają wartościom kolumn, podczas gdy tablica będzie oczekiwała tablicy obiektów z nazwanym polem odpowiadającym każdej kolumnie. Default: none.
• dataInfo | object: obiekt z tablicą łańcuchów info opisującą zbiór danych, nazwą zbioru danych, obiektem ze zmiennymiz klawiszami odpowiadającymi nazwom i wartościom zmiennych do opisów zmiennych,wyświetlaniemOnStartupboolean kontrolującym, czy przy uruchamianiu wyświetlić modal informacyjny. Default:{ 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }`.
• deletable | boolean: kontroluje, czy kolumny, dla których nie istnieją info posiadają przycisk, który po kliknięciu wywołuje funkcję onColumnDelete callback. Default: false.
• undeletableVars | array<string>: tablica nazw zmiennych w kolumnach, które nie mogą zostać usunięte. Default: [].
• filterable | boolean: kontroluje, czy kolumny są filtrowalne. Default: true.
• editable | array: szereg nazw dla kolumn, które mają być edytowalne. Default: [].
• getTrProps | function: funkcja wywołania zwrotnego wykonywana dla każdego wiersza w celu dostosowania jego stylizacji (przekazany stan tabeli, informacje o wierszu, kolumna i instancja tabeli). Default: none.
• onColumnDrag | function: funkcja wywoływana po przeciągnięciu kolumny do innej pozycji. Default: onColumnDrag() {}.
• onColumnDelete | function: funkcja wywoływana z nazwą kolumny po kliknięciu odpowiedniego przycisku usuwania dla danej kolumny. Default: onColumnDelete() {}.
• onColumnNameChange | function: funkcja wywoływana po zmianie nazwy kolumny (wywoływana ze starą nazwą jako pierwszą i nową jako drugim argumentem). Default: onColumnNameChange() {}.
• onClickRemove | function: funkcja określająca akcję, którą należy wykonać dla wierszy usuniętych z danych (domyślnie funkcja pusta). Default: onClickRemove() {}.
• onEdit | function: funkcja wywoływana z aktualnym zestawem danych po zmianie wartości komórki przez użytkownika (dotyczy tylko sytuacji, gdy tabela jest edytowalna). Default: onEdit() {}.
• onTutorialCompletion | function: funkcja wywoływana po wypełnieniu przez użytkownika tutorialu tabeli danych. Default: onTutorialCompletion() {}.
• filters | array: tablica filtrów. Default: [].
• onFilteredChange | function: funkcja wywoływana przy pomocy aktualnych filtrów po przefiltrowaniu danych przez użytkownika. Default: onFilteredChange() {}.
• showRemove | boolean: wskazuje, czy mają być wyświetlane pola wyboru dla wierszy, które mają być usunięte. Default: false.
• showIdColumn | boolean: kontroluje, czy pokazywana jest kolumna ID. Default: true.
• disableDownload | boolean: czy ukryć przycisk do pobrania danych jako plik CSV lub JSON. Default: false.
• className | string: nazwa klasy. Default: ''.
• style | object: Obiekt pozwalający na niestandardową stylizację css. Domyślna wartość dla pustego obiektu. Default: {}.

Przykłady

Edytor na żywo

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

Wynik

ReferenceError: Provider is not defined