React Table

  • Post
    React Table

    Tabel adalah susunan yang mengatur informasi menjadi baris dan kolom. Ini digunakan untuk menyimpan dan menampilkan data dalam format terstruktur.

    React-table adalah ringan, cepat, dapat disesuaikan sepenuhnya (JSX, template, status, gaya, callback), dan Datagrid yang dapat diperpanjang dibangun untuk React. Ini sepenuhnya dapat dikontrol melalui alat peraga dan panggilan balik opsional.

    fitur

    1. Ini ringan pada 11kb (dan hanya membutuhkan 2kb lebih untuk gaya).
    2. Ini sepenuhnya dapat disesuaikan (JSX, template, status, gaya, callback).
    3. Ini sepenuhnya dapat dikontrol melalui alat peraga dan panggilan balik opsional.
    4. Ini memiliki pagination sisi klien & sisi Server.
    5. Ini memiliki filter.
    6. Pivoting & Agregasi
    7. Desain minimal & mudah bertema

    Instalasi

    Mari kita buat aplikasi React menggunakan perintah berikut.

    1. $ npx buat-reaksi-aplikasi myreactapp

    Selanjutnya, kita perlu menginstal react-table . Kita dapat menginstal react-table melalui perintah npm, yang diberikan di bawah ini.

    1. $ npm instal react-table

    Setelah kita menginstal react-table, kita perlu mengimpor tabel react ke dalam komponen react. Untuk melakukan ini, buka file src / App.js dan tambahkan cuplikan berikut.

    1. constdata = [{
    2. name: ‘Ayaan’,
    3. age: 26
    4. },{
    5. name: ‘Ahana’,
    6. age: 22
    7. },{
    8. name: ‘Peter’,
    9. age: 40
    10. },{
    11. name: ‘Virat’,
    12. age: 30
    13. },{
    14. name: ‘Rohit’,
    15. age: 32
    16. },{
    17. name: ‘Dhoni’,
    18. age: 37
    19. }]

    Bersama dengan data, kita juga perlu menentukan info kolom dengan atribut kolom .

    1. const columns = [{
    2. Header: ‘Name’,
    3. accessor: ‘name’
    4. },{
    5. Header: ‘Age’,
    6. accessor: ‘age’
    7. }]

     

     

    Di dalam metode render, kita perlu mengikat data ini dengan react-table dan kemudian mengembalikan react-table.

    1. return(
    2. <div>
    3. <ReactTable
    4. data={data}
    5. columns={columns}
    6. defaultPageSize = {2}
    7. pageSizeOptions = {[2,4, 6]}
    8. />
    9. </div>
    10. )

    Sekarang, file src / App.js kita terlihat seperti di bawah ini.

    1. importReact, { Component } from ‘react’;
    2. importReactTable from “react-table”;
    3. import“react-table/react-table.css”;
    4. classApp extends Component {
    5. render() {
    6. const data = [{
    7. name: ‘Ayaan’,
    8. age: 26
    9. },{
    10. name: ‘Ahana’,
    11. age: 22
    12. },{
    13. name: ‘Peter’,
    14. age: 40
    15. },{
    16. name: ‘Virat’,
    17. age: 30
    18. },{
    19. name: ‘Rohit’,
    20. age: 32
    21. },{
    22. name: ‘Dhoni’,
    23. age: 37
    24. }]
    25. constcolumns = [{
    26. Header: ‘Name’,
    27. accessor: ‘name’
    28. },{
    29. Header: ‘Age’,
    30. accessor: ‘age’
    31. }]
    32. return(
    33. <div>
    34. <ReactTable
    35. data={data}
    36. columns={columns}
    37. defaultPageSize = {2}
    38. pageSizeOptions = {[2,4, 6]}
    39. />
    40. </div>
    41. )
    42. }
    43. }
    44. export defaultApp;

     

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.