Ui Dynamic

Table

Table merupakan grup yang memiliki sebanyak delapan elemen di dalamnya, yang mana setiap elemennya memiliki kegunaanya masing - masing dalam proses pengembangan sebuah proyek website

1. Table large I

Table

User ID	Name	Occupation	Earnings	Daily Avg	Change
098811	Maddison Bush	Front-End Developer	$40.000	$400	18%
098812	Danny Alves	Graphic Designer	$46.000	$420	60%
098813	Alex Rivera	Back-End Developer	$41.000	$405	40%
098814	Jennifer Schanuth	Front-End Developer	$44.000	$390	25%
098815	Emma Macdonald	Copywriter	$38.000	$410	30%
098816	Ashley Jane	Graphic Designer	$52.000	$500	20%
098817	Ailah Riley	Front-End Developer	$40.000	$408	50%
098818	Samuel Conte	Copywriter	$32.000	$420	35%
098819	Peter Jefferson	Back-End Developer	$47.000	$340	30%

Table large I sangat cocok digunakan untuk menampilkan data dari sistem website anda, baik itu berupa data pegawai atau data lainnya, seperti pada gambar digunakan untuk menampilkan data pegawai beserta dengan photo mereka.


    <div class="col-12">
      <div class="tablelarge1-table shadow" >
        <div class="tablelarge1head-table"> 
          <div class="tablelarge1titlecontainer-table">
            <p class="tablelarge1title-table">Table</p>
          </div>
        </div>
        <div class="tablelarge1body-table" style="overflow-x: auto !important;">
            <table>
              <thead>
                <th class="tablelarge1checkhead-table"><input type=checkbox
                    onclick="[...closest('table').querySelectorAll('tbody [type=checkbox]')].forEach(box=>box.checked=checked)">
                </th>
                <th class="tablelarge1useridhead-table">User ID</th>
                <th class="tablelarge1namehead-table">Name</th>
                <th>Occupation</th>
                <th>Earnings</th>
                <th>Daily Avg</th>
                <th>Change</th>
              </thead>
              <tbody>
                <tr>
                  <td><input type=checkbox name=chk value=chk1></td>
                  <td>098811</td>
                  <td class="tablelarge1profilecolumn-table">
                    <div class="tablelarge1namecontainer-table">
                      <div class="tablelarge1namecol3-table">
                        <img  src="assets/images/Profile2.png" alt="Card image cap" class="tablelarge1nameprofilepic-table">
                      </div>
                      <div class="tablelarge1namecol8-table">
                        <div class="dim12">
                          <p class="tablelarge1nametext-table">Maddison Bush</p>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td> 
                    <div class="tablelarge1occupationcontainer-table">
                      <p class="tablelarge1occupation-table ">Front-End Developer</p>
                    </div>
                  </td>
                  <td>$40.000</td>
                  <td>$400</td>
                  <td class="tablelarge1changecolumn-table">18%</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

2. Table large II

Table

User ID	Name	Occupation	Email	Role	Registered
098811	Maddison Bush	Back-End Developer	maddisonbush@mail.com	Owner	16 hours ago
098812	Danny Alves	Front-End Developer	dannyalves@mail.com	Owner	5 days ago
098813	Alex Rivera	Graphic Design	alexrivera@mail.com	Owner	1 week ago
098814	Jennifer Schanuth	Copywriter	jenniferschanuth@mail.com	Owner	1 hours ago
098815	Emma Macdonald	Back-End Developer	emmamacdonald@mail.com	Owner	12 hours ago
098816	Ashley Jane	Front-End Developer	ashleyjane@mail.com	Owner	3 days ago
098817	Ailah Riley	Back-End Developer	ailahriley@mail.com	Owner	5 days ago

Table large II sangat bermanfaat jika anda ingin menampilkan data tanpada menggunakan photo profile, ini juga dapat menimbulkan kesan minimalis.


    <div class="col-12">
      <div class="tablelarge2-table shadow">
        <div class="tablelarge2head-table"> 
          <div class="tablelarge2titlecontainer-table">
            <p class="tablelarge2title-table">Table</p>
          </div>
        </div>
        <div class="tablelarge2body-table">
            <table>
              <thead>
                <th class="tablelarge2checkhead-table">
                  <input type=checkbox onclick="[...closest('table').querySelectorAll('tbody [type=checkbox]')].forEach(box=>box.checked=checked)">
                </th>
                <th class="tablelarge2useridhead-table">User ID</th>
                <th class="tablelarge2namehead-table">Name</th>
                <th>Occupation</th>
                <th>Email</th>
                <th>Role</th>
                <th>Registered</th>
              </thead>
              <tbody>
                <tr>
                  <td><input type=checkbox name=chk value=chk1></td>
                  <td class="tablelarge2noidcolumn-table">098811</td>
                  <td class="tablelarge2profilecolumn-table">
                    Maddison Bush
                  </td>
                  <td> 
                    Back-End Developer
                  </td>
                  <td>maddisonbush@mail.com</td>
                  <td>Owner</td>
                  <td>16 hours ago</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

3. Table large III

Table

Creator	Rating	Created	Potential Reach	Reach to Date
Maddison Bush	4.0 500 reviews	16 hours ago	16.000 - 20.000	6.750
Danny Alves	4.0 500 reviews	5 days ago	9.000 - 17.000	8.000
Alex Rivera	4.0 500 reviews	1 week ago	25.000 - 30.000	7.650
Jennifer Schanuth	4.0 500 reviews	1 hours ago	50.000 - 76.000	10.000

Table large III dapat digunakan saat anda ingin menampilkan gambar dengan kon-figurasi landscape kedalam table, dengan fitur ini akan membuat tampilan dari website anda menjadi lebih elegan.


    <div class="col-12">
      <div class="tablelarge3-table shadow">
        <div class="tablelarge3head-table"> 
          <div class="tablelarge3titlecontainer-table">
            <p class="tablelarge3title-table">Table</p>
          </div>
        </div>
        <div class="tablelarge3body-table">
            <table>
              <thead>
                <th class="tablelarge3useridhead-table">Product</th>
                <th class="tablelarge3namehead-table">Creator</th>
                <th>Rating</th>
                <th>Created</th>
                <th>Potential Reach</th>
                <th>Reach to Date</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div class="tablelarge3imagecontainer-table">
                      <img  src="assets/images/carddisplay1.png" alt="Card image cap" class="tablelarge3image-table"  alt="IMAGE">
                    </div>
                  </td>
                  <td>
                  Maddison Bush
                  </td>
                  <td> 
                    <span>4.0</span>
                    <span><i class="material-icons" style="font-size: 15px; vertical-align: -2;  color:#FED568">star</i></span>
                    <span>500 reviews</span>
                  </td>
                  <td>16 hours ago</td>
                  <td>16.000 - 20.000</td>
                  <td>6.750</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

4. Table medium I

No	Name	Email	Earnings	Created
1	Maddison Bush	maddisonbush@mail.com	$120.00	16 hours ago
2	Danny Alves	dannyalves@mail.com	$200.00	5 days ago
3	Alex Rivera	alexrivera@mail.com	$300.00	1 week ago
4	Jennifer Schanuth	jenniferschanuth@mail.com	$145.00	1 hours ago
5	Emma Macdonald	emmamacdonald@mail.com	$240.00	12 hours ago
6	Ashley Jane	ashleyjane@mail.com	$350.00	3 days ago
7	Ailah Riley	ailahriley@mail.com	$247.00	5 days ago

Table medium I sangat pas digunakan jika anda ingin menampilkan data rangkuman dari kinerja pegawai atau staff di perusahaan anda.


    <div class="col-8">
      <div class="tablemedium1-table shadow">
        <div class="tablemedium1body-table">
            <table>
              <thead>
                <th class="tablemedium1useridhead-table">No</th>
                <th class="tablemedium1namehead-table">Name</th>
                <th>Email</th>
                <th>Earnings</th>
                <th>Created</th>
              </thead>
              <tbody>
                <tr>
                  <td class="tablemedium1noidcolumn-table">1</td>
                  <td class="tablemedium1profilecolumn-table">
                    Maddison Bush
                  </td>
                  <td>maddisonbush@mail.com</td>
                  <td>$120.00</td>
                  <td>16 hours ago</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

5. Table medium II

Vehicle Specs Compare	SR $22.000	TRD Sport $25.000	Ultimate $31.000
LED Headlight	Not Included	Included	Included
Mud Guard	Included	Included	Included
Daytime Running Light	Not Included	Not Included	Included
Over Fender	Not Included	Not Included	Included
Tow Bar	Included	Included	Included
TRD Pro Skid Plate	Not Included	Not Included	Included

Table medium II berfungsi sangat baik untuk menampilkan data komparasi dari product yang terdapat dalam website anda, sehingga user akan lebih mudah dalam mencerna informasi yang terkandung.


    <div class="col-8">
      <div class="tablemedium2-table shadow">
        <div class="tablemedium2body-table">
            <table>
              <thead>
                <th>
                <p>Vehicle Specs Compare</p>
                </th>
                <th>
                  <p>SR</p>
                  <p>$22.000</p>
                  <div class="buttoncontainer-button btn-blocked">
                    <button type="submit" href="#" class="button-button btn-purple btn-text-white">Select Vehicle</button>  
                  </div>   
                </th>
                <th>
                  <p>TRD Sport</p>
                  <p>$25.000</p>
                  <div class="buttoncontainer-button btn-blocked">
                    <button type="submit" href="#" class="button-button btn-purple btn-text-white">Select Vehicle</button>  
                  </div>   
                </th>
                <th>
                  <p>Ultimate</p>
                  <p>$31.000</p>
                  <div class="buttoncontainer-button btn-blocked">
                    <button type="submit" href="#" class="button-button btn-purple btn-text-white">Select Vehicle</button>  
                  </div>   
                </th>
              </thead>
              <tbody>
                <tr>
                  <th class="tablemedium2rowhead-table">LED Headlight</th>
                  <td>Not Included</td>
                  <td>Included</td>
                  <td>Included</td>
                </tr>
                <tr>
                  <th class="tablemedium2rowhead-table">Mud Guard</th>
                  <td>Included</td>
                  <td>Included</td>
                  <td>Included</td>
                </tr>
                <tr>
                  <th class="tablemedium2rowhead-table">Daytime Running Light</th>
                  <td>Not Included</td>
                  <td>Not Included</td>
                  <td>Included</td>
                </tr>
                <tr>
                  <th class="tablemedium2rowhead-table">Over Fender</th>
                  <td>Not Included</td>
                  <td>Not Included</td>
                  <td>Included</td>
                </tr>
                <tr>
                  <th class="tablemedium2rowhead-table">Tow Bar</th>
                  <td>Included</td>
                  <td>Included</td>
                  <td>Included</td>
                </tr>
                <tr>
                  <th class="tablemedium2rowhead-table">TRD Pro Skid Plate</th>
                  <td>Not Included</td>
                  <td>Not Included</td>
                  <td>Included</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

6. Table small I

Sport
LED Headlight
Mud Guard
Daytime Running Light
Over Fender
Tow Bar
TRD Pro Skid Plate

Table small I digunakan untuk menampilkan fitur dari suatu produk kedalam bentuk table, dengan fitur ini informasi yang berkaitan dengan produk tersebut akan ter-sampaikan dengan jelas.


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="tablesmall1-table shadow">
        <div class="tablesmall1body-table">
            <table>
              <thead>
                <th>Sport</th>
              </thead>
              <tbody>
                <tr>
                  <td>LED Headlight</td>
                </tr>
                <tr>
                  <td>Mud Guard</td>
                </tr>
                <tr>
                  <td>Daytime Running Light</td>
                </tr>
                <tr>
                  <td>Over Fender</td>
                </tr>
                <tr>
                  <td>Tow Bar</td>
                </tr>
                <tr>
                  <td>TRD Pro Skid Plate</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

7. Table small II

Ultimate
LED Headlight
Mud Guard
Daytime Running Light
Over Fender
Tow Bar
TRD Pro Skid Plate

Table small II memiliki fitur yang hampir sama dengan table small I, namun disini memiliki pemilihan warna dan desain yang berbeda dengan sebelumnya.


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="tablesmall2-table shadow">
        <div class="tablesmall2body-table">
            <table>
              <thead>
                <th>Ultimate</th>
              </thead>
              <tbody>
                <tr>
                  <td>LED Headlight</td>
                </tr>
                <tr>
                  <td>Mud Guard</td>
                </tr>
                <tr>
                  <td>Daytime Running Light</td>
                </tr>
                <tr>
                  <td>Over Fender</td>
                </tr>
                <tr>
                  <td>Tow Bar</td>
                </tr>
                <tr>
                  <td>TRD Pro Skid Plate</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>

8. Table small III

Luxury
LED Headlight
Mud Guard
Daytime Running Light
Over Fender
Tow Bar
TRD Pro Skid Plate

Table small III memiliki fitur yang hampir sama dengan dua table sebelumnya, na-mun pada table ini konsep desain dan warna yang disuguhkan berbeda dari kedua table sebelumnya.

                      
    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="tablesmall3-table">
        <div class="tablesmall3body-table">
            <table>
              <thead>
                <th>Luxury</th>
              </thead>
              <tbody>
                <tr>
                  <td>LED Headlight</td>
                </tr>
                <tr>
                  <td>Mud Guard</td>
                </tr>
                <tr>
                  <td>Daytime Running Light</td>
                </tr>
                <tr>
                  <td>Over Fender</td>
                </tr>
                <tr>
                  <td>Tow Bar</td>
                </tr>
                <tr>
                  <td>TRD Pro Skid Plate</td>
                </tr>
              </tbody>
            </table>
        </div>      
      </div>
    </div>