Tanggal :September 27, 2020

Cara Membuat Table di React Js.

Spread the love

Pada artikel ini saya akan mencoba untuk mengajarkan cara membuat tabel dinamis.
Ya saya tahu yang cukup sederhana, tapi tutorial ini adalah untuk pemula dan pemula harus tahu bagaimana untuk mendapatkan hal-hal semacam ini dilakukan.

Saya berasumsi Anda tahu cara membuat proyek dan bagaimana kelas javascript bekerja. Jika tidak, baca artikel ini terlebih dahulu.

Mari kita mulai
Asumsi kita memiliki data dalam bentuk array objek seperti API. Anda juga dapat menggunakan API.

Mari kita membuat komponen sederhana dan menyimpan data dalam state.

class Table extends Component {
  constructor(props) {
    super(props); //since we are extending class Table so we have to use super in order to override Component class constructor
    this.state = {
      //state is by default an object
      students: [
        { id: 1, name: "Wasif", age: 21, email: "[email protected]" },
        { id: 2, name: "Ali", age: 19, email: "[email protected]" },
        { id: 3, name: "Saad", age: 16, email: "[email protected]" },
        { id: 4, name: "Asad", age: 25, email: "[email protected]" },
      ],
    };
  }
}

export default Table;

Perlu di ingat , file dalam studi kasus ini akan jadi seperti dibawah ini :

Pada Data yang kita buat, kita memiliki 4 siswa dengan data id, nama, usia dan alamat email. Karena table akan dinamis sehingga tidak masalah jika kita memiliki data 4 atau 100 siswa bah ribuan siswa

Sekarang kita ingin mencetak data siswa di Dom. Kita sering menggunakan fungsi map untuk iterasi dalam data array.
Selanjutnya mari kita menulis fungsi terpisah untuk data tabel dan memanggilnya dalam metode render. Pendekatan ini akan membuat kode kita lebih bersih dan lebih mudah dibaca.

   renderTableData() {
      return this.state.students.map((student, index) => {
         const { id, name, age, email } = student //destructuring
         return (
            <tr key={id}>
               <td>{id}</td>
               <td>{name}</td>
               <td>{age}</td>
               <td>{email}</td>
            </tr>
         )
      })
   }

   render() {
      return (
         <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
               <tbody>
                  {this.renderTableData()}
               </tbody>
            </table>
         </div>
      )
   }

Taruh Source code tersebut disela sela file Table.js , jika sudah maka file Table js maka akan tampak seperti dibawah ini :

import React, { Component } from "react";
import "./main.css";

class Table extends Component {
  constructor(props) {
    super(props); //since we are extending class Table so we have to use super in order to override Component class constructor
    this.state = {
      //state is by default an object
      students: [
        { id: 1, name: "Wasif", age: 21, email: "[email protected]" },
        { id: 2, name: "Ali", age: 19, email: "[email protected]" },
        { id: 3, name: "Saad", age: 16, email: "[email protected]" },
        { id: 4, name: "Asad", age: 25, email: "[email protected]" },
      ],
    };
  }

  renderTableData() {
    return this.state.students.map((student, index) => {
      const { id, name, age, email } = student; //destructuring
      return (
        <tr key={id}>
          <td>{id}</td>
          <td>{name}</td>
          <td>{age}</td>
          <td>{email}</td>
        </tr>
      );
    });
  }

  renderTableHeader() {
    let header = Object.keys(this.state.students[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  }

  render() {
    return (
      <div>
        <h1 id="title">React Dynamic Table</h1>
        <table id="students">
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Setelah itu mari kita custome css table dan menempatkan code css berikut di file main.css

#title {
  text-align: center;
  font-family: arial, sans-serif;
}

#students {
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  border: 3px solid #ddd;
  width: 100%;
}

#students td,
#students th {
  border: 1px solid #ddd;
  padding: 8px;
}

#students tr:nth-child(even) {
  background-color: #f2f2f2;
}

#students tr:hover {
  background-color: #ddd;
}

#students th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

Jangan lupa import file css tersebut ke file Table.js

Setelah itu mari kita gunakan component table yang kita buat di file LandingPage.js

Maka file LandingPage.js anda akan seperti dibawah ini :

import React from "react";
import Table from "../Parts/Table";

export default function LandingPage() {
  return (
    <div>
      <Table></Table>
    </div>
  );
}

Maka Hasil Table akan tampak seperti dibawah ini :

table react js

Share

Leave a Reply

Your email address will not be published. Required fields are marked *