Data Table

Ένα στοιχείο που απεικονίζει δεδομένα σε μορφή πίνακα. Βασίζεται στο react-table.

Επιλογές

• data | (array|object) (required): Ένα αντικείμενο δεδομένων ή ένας πίνακας δεδομένων προς προβολή. Αν πρόκειται για αντικείμενο, τα κλειδιά αντιστοιχούν στις τιμές των στηλών, ενώ ένας πίνακας θα περιμένει έναν πίνακα αντικειμένων με ένα ονομαστικό πεδίο που αντιστοιχεί σε κάθε στήλη.. Default: none.
• dataInfo | object: αντικείμενο με πίνακα συμβολοσειρών info που περιγράφει το σύνολο δεδομένων, το name του συνόλου δεδομένων, ένα object των variables με κλειδιά που αντιστοιχούν στα ονόματα των μεταβλητών και τιμές στις περιγραφές των μεταβλητών, και ένα boolean 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: {}.

Παραδείγματα

Live Editor

<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