Materialize এর টেবিলস এবং ডেটা টেবিলস

মেটেরিয়ালাইজ (Materialize) - Web Development

232

Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা সুন্দর এবং কাস্টমাইজযোগ্য টেবিলস এবং ডেটা টেবিলস তৈরি করার জন্য বিভিন্ন উপাদান এবং স্টাইল সরবরাহ করে। ওয়েবসাইটে ডেটা প্রেজেন্টেশনের জন্য টেবিলস একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, এবং Materialize CSS টেবিলগুলিকে খুব সহজেই ডাইনামিক এবং রেসপন্সিভ করে তোলে।

এখানে Materialize CSS এর টেবিলস এবং ডেটা টেবিলস এর ব্যবহার এবং কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করা হলো।

Materialize এর বেসিক টেবিল

Materialize CSS-এ সাধারণ টেবিল তৈরি করা খুবই সহজ। আপনি HTML টেবিলের সাধারণ স্টাইলিং ব্যবহার করে Materialize CSS এর সাথে সুন্দর টেবিল তৈরি করতে পারেন।

১. Basic Table Example:

<table class="striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>+1234567890</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>+9876543210</td>
    </tr>
  </tbody>
</table>

এখানে:

striped ক্লাসটি টেবিলের রো গুলোর মধ্যে স্ট্রাইপ বা সাদা এবং কালো রঙের পরিবর্তন যুক্ত করে, যা টেবিলের রিডেবলনেস বাড়ায়।
thead এবং tbody: টেবিলের হেডার এবং বডি সেকশন পৃথকভাবে তৈরি করা হয়।

Materialize এর ডেটা টেবিল

ডেটা টেবিলস সাধারণত বড় আকারের ডেটা প্রদর্শন এবং পরিচালনা করতে ব্যবহৃত হয়। Materialize CSS আপনাকে ডেটা টেবিলস তৈরি করতে সাহায্য করে যা ডেটা ফিল্টারিং, সোর্টিং, পেজিনেশন এবং সার্চ ইত্যাদি ফিচারের সাথে কাজ করে। আপনি Materialize CSS এর JavaScript ফিচার ব্যবহার করে ডেটা টেবিলের কার্যকারিতা বাড়াতে পারেন।

২. Data Table with Sorting Example:

<table class="highlight">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>+1234567890</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>+9876543210</td>
    </tr>
    <tr>
      <td>Mark Brown</td>
      <td>markbrown@example.com</td>
      <td>+1122334455</td>
    </tr>
  </tbody>
</table>

এখানে:

highlight ক্লাসটি টেবিলের রো গুলোর উপর মাউস হোভার করলে এক ধরনের হাইলাইট ইফেক্ট তৈরি করে।

৩. Data Table with Pagination Example:

Materialize CSS টেবিলের pagination বা পৃষ্ঠার বিভাজন ফিচার সাপোর্ট করে। এটি ডেটার বড় সেটকে কয়েকটি পৃষ্ঠায় ভাগ করতে সাহায্য করে।

<ul class="pagination">
  <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
  <li class="active"><a href="#!">1</a></li>
  <li><a href="#!">2</a></li>
  <li><a href="#!">3</a></li>
  <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>

এখানে:

pagination ক্লাসটি পেজিনেশন তৈরি করার জন্য ব্যবহৃত হয়।
disabled ক্লাসটি পূর্ববর্তী বা পরবর্তী পেজ বন্ধ করে দেয় যদি এটি সিলেক্ট করা না হয়।

৪. Data Table with Search Example:

Materialize CSS টেবিলের জন্য একটি search ফিচারও সরবরাহ করে, যা ডেটা টেবিলের মধ্যে নির্দিষ্ট তথ্য খুঁজে বের করতে সাহায্য করে।

<input id="search" type="text" class="validate" placeholder="Search">
<table id="myTable" class="striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>+1234567890</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>+9876543210</td>
    </tr>
  </tbody>
</table>

<script>
  document.getElementById('search').addEventListener('keyup', function() {
    let search = this.value.toLowerCase();
    let rows = document.querySelectorAll('#myTable tbody tr');
    rows.forEach(function(row) {
      let name = row.cells[0].textContent.toLowerCase();
      let email = row.cells[1].textContent.toLowerCase();
      let phone = row.cells[2].textContent.toLowerCase();
      
      if (name.includes(search) || email.includes(search) || phone.includes(search)) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    });
  });
</script>

এখানে:

keyup ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে যা ইউজার যখন কিছু টাইপ করেন তখন টেবিলের সারিগুলোকে ফিল্টার করে দেখাবে।

টেবিল স্টাইলিং কাস্টমাইজেশন

Materialize CSS-এ টেবিল কাস্টমাইজ করার জন্য আপনি বিভিন্ন ক্লাস ব্যবহার করতে পারেন, যেমন striped, highlight, responsive-table, centered, ইত্যাদি।

Striped Table: টেবিলের সারিগুলোর মধ্যে রঙের পরিবর্তন করে।
```
<table class="striped">
  
</table>
```
Responsive Table: টেবিলটি স্ক্রীনের সাইজ অনুযায়ী রেসপন্সিভ করা।
```
<table class="responsive-table">
  
</table>
```
Center Aligned Table: টেবিলের কন্টেন্টকে কেন্দ্রভাগে সজ্জিত করা।
```
<table class="centered">
  
</table>
```
Highlighting Table Rows: highlight ক্লাস ব্যবহার করলে রো গুলোর উপর মাউস হোভার করলে রো হাইলাইট হবে।
```
<table class="highlight">
  
</table>
```

উপসংহার

Materialize CSS টেবিল এবং ডেটা টেবিলস তৈরি এবং কাস্টমাইজ করা সহজ এবং কার্যকরী। আপনি striped, highlight, responsive-table ইত্যাদি ক্লাস ব্যবহার করে আপনার টেবিলগুলিকে সুন্দর এবং ব্যবহারযোগ্য করে তুলতে পারেন। এছাড়া, pagination, search, sorting, এবং filtering এর মতো ফিচারের মাধ্যমে ডেটা টেবিলকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করা যায়। Materialize CSS এর সহজ কাস্টমাইজেশন ফিচারগুলো আপনাকে ব্যবহারকারীর জন্য একটি সুসংগঠিত এবং আকর্ষণীয় ডেটা প্রেজেন্টেশন তৈরি করতে সহায়তা করে।

Content added By

Rezwan Siddiki Tamim

Materialize এর বেসিক টেবিল তৈরি করা

217

Materialize CSS-এ একটি বেসিক টেবিল তৈরি করা খুবই সহজ। Materialize CSS একটি সুন্দর এবং ব্যবহারবান্ধব টেবিল স্টাইল প্রদান করে, যার মাধ্যমে আপনি আপনার ওয়েবসাইটে বা অ্যাপ্লিকেশনে দ্রুত এবং কার্যকরী টেবিল তৈরি করতে পারেন।

এখানে Materialize CSS ব্যবহার করে একটি বেসিক টেবিল তৈরির পদ্ধতি এবং কাস্টমাইজেশনের উপায় বিস্তারিতভাবে আলোচনা করা হলো।

Materialize CSS-এ বেসিক টেবিল তৈরি করা

Materialize CSS-এ টেবিল তৈরির জন্য সাধারণত HTML টেবিল ট্যাগ ব্যবহার করা হয় এবং এর সাথে কিছু প্রি-ডিফাইন্ড ক্লাস যোগ করা হয়, যা টেবিলের ডিজাইনকে সুন্দর এবং সুশৃঙ্খল করে তোলে।

বেসিক টেবিল উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Table Example</title>
  <!-- Materialize CSS Link -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Table Structure -->
  <div class="container">
    <h4>Basic Table</h4>
    <table class="striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>28</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>34</td>
          <td>Los Angeles</td>
        </tr>
        <tr>
          <td>George Wilson</td>
          <td>41</td>
          <td>Chicago</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

কোড ব্যাখ্যা:

<table class="striped">: striped ক্লাস ব্যবহার করা হয়েছে যা টেবিলের সারিগুলোর জন্য স্ট্রাইপ ইফেক্ট দেয়, অর্থাৎ একটি সারি হালকা রঙ এবং পরবর্তী সারি গা dark ় রঙে হবে, যাতে টেবিলটি দেখতে সুন্দর এবং পরিষ্কার হয়।
<thead>: এটি টেবিলের হেডার সেকশন, যেখানে কলামের শিরোনাম রাখা হয়।
<tbody>: এটি টেবিলের বডি, যেখানে ডেটা বা তথ্য রাখা হয়।
<th>: এই ট্যাগটি হেডারে ব্যবহৃত হয়, যা প্রতিটি কলামের শিরোনাম তৈরি করে।
<td>: এই ট্যাগটি টেবিলের ডেটা কন্টেন্ট বা মানের জন্য ব্যবহৃত হয়।

Materialize CSS-এ টেবিল কাস্টমাইজেশন

Materialize CSS আপনাকে টেবিলের ডিজাইন কাস্টমাইজ করার জন্য কিছু অতিরিক্ত ক্লাস প্রদান করে। নিচে কিছু সাধারণ কাস্টমাইজেশন অপশন দেখানো হলো।

১. Responsive Table

Materialize CSS একটি responsive টেবিল সিস্টেম প্রদান করে, যাতে ছোট স্ক্রীনে টেবিল হরিজন্টালি স্ক্রলযোগ্য হয়ে ওঠে।

<table class="striped responsive-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>George Wilson</td>
      <td>41</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

এখানে:

responsive-table ক্লাস টেবিলের স্ক্রলযোগ্যতা নিশ্চিত করে, যাতে ছোট স্ক্রীনে টেবিল সুন্দরভাবে উপস্থাপিত হয় এবং ব্যবহারকারী স্ক্রল করতে পারে।

২. Hoverable Table

আপনি যদি টেবিলের সারিগুলোর ওপর হোভার করলে কোনো ইফেক্ট দেখতে চান, তবে hoverable ক্লাস ব্যবহার করতে পারেন।

<table class="striped hoverable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>George Wilson</td>
      <td>41</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

এখানে:

hoverable ক্লাস সারি হোভার করার সময় তাদের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে, যা ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাকটিভ হতে সাহায্য করে।

৩. Bordered Table

আপনি টেবিলের সারির চারপাশে বর্ডার যোগ করতে চাইলে bordered ক্লাস ব্যবহার করতে পারেন।

<table class="bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>George Wilson</td>
      <td>41</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

এখানে:

bordered ক্লাস টেবিলের প্রতিটি সেলের চারপাশে বর্ডার যোগ করবে, যা টেবিলকে আরো স্পষ্ট এবং পরিস্কার দেখাবে।

উপসংহার

Materialize CSS-এ বেসিক টেবিল তৈরি করা অত্যন্ত সহজ এবং দ্রুত। আপনি striped, hoverable, responsive, bordered এবং অন্যান্য বিভিন্ন ক্লাস ব্যবহার করে টেবিলকে কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনার টেবিলটি আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে। Materialize CSS এক্সটেনসিভ টেবিল স্টাইলিং এবং ফিচারগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইটে সুন্দর এবং কার্যকরী টেবিল উপস্থাপন করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Responsive Tables এবং Highlighted Rows

323

Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা responsive tables এবং highlighted rows তৈরি করার জন্য প্রয়োজনীয় টুল এবং স্টাইল প্রদান করে। ওয়েব ডিজাইনে টেবিল একটি গুরুত্বপূর্ণ উপাদান যা বিভিন্ন ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। Responsive tables ওয়েবসাইটের মোবাইল-ফ্রেন্ডলি ডিজাইনে সহায়ক, এবং highlighted rows ব্যবহারকারীকে বিশেষ কোনো রেকর্ড বা ডেটা সহজে আলাদা করতে সহায়ক।

এখানে Materialize CSS-এ Responsive Tables এবং Highlighted Rows কিভাবে তৈরি এবং কনফিগার করা হয় তা বিস্তারিতভাবে আলোচনা করা হলো।

Responsive Tables

Responsive tables এমন টেবিল, যা ছোট স্ক্রীনে বা মোবাইল ডিভাইসে স্ক্রল করা যায়, যাতে তথ্যগুলি সহজে দেখা যায়। Materialize CSS এর মাধ্যমে আপনি সহজেই রেসপন্সিভ টেবিল তৈরি করতে পারেন। এর জন্য responsive-table ক্লাস ব্যবহৃত হয়।

১. Responsive Table তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Responsive Table</title>
  <!-- Materialize CSS Link -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Responsive Table -->
  <div class="container">
    <table class="responsive-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>John Doe</td>
          <td>28</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>34</td>
          <td>Los Angeles</td>
        </tr>
        <tr>
          <td>Mark Wilson</td>
          <td>25</td>
          <td>Chicago</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Materialize JS and jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

কোড ব্যাখ্যা:

.responsive-table: Materialize CSS এর এই ক্লাসটি টেবিলকে মোবাইল-ফ্রেন্ডলি (responsive) বানাতে ব্যবহৃত হয়। এটি টেবিলের কনটেন্ট মোবাইল ডিভাইসে স্ক্রলযোগ্য করে তোলে।
thead, tbody: টেবিলের হেডার এবং বডি তৈরি করতে ব্যবহৃত হয়।

Responsive tables এ সাধারণভাবে scrollable ফিচার যোগ করা হয় যাতে ছোট স্ক্রীনে টেবিলের কনটেন্ট সঠিকভাবে দেখা যায়।

Highlighted Rows

Highlighted rows হল এমন টেবিলের সারি, যেগুলি বিশেষভাবে প্রদর্শন করতে বা ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য আলাদা করা হয়। এটি সাধারণত ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ বা নির্বাচিত রেকর্ড প্রদর্শন করতে ব্যবহৃত হয়। Materialize CSS-এ আপনি সহজেই highlighted rows তৈরি করতে পারেন।

২. Highlighted Row তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Highlighted Rows</title>
  <!-- Materialize CSS Link -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Table with Highlighted Row -->
  <div class="container">
    <table class="highlight">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>John Doe</td>
          <td>28</td>
          <td>New York</td>
        </tr>
        <tr class="highlighted">
          <td>Jane Smith</td>
          <td>34</td>
          <td>Los Angeles</td>
        </tr>
        <tr>
          <td>Mark Wilson</td>
          <td>25</td>
          <td>Chicago</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Materialize JS and jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

কোড ব্যাখ্যা:

.highlight: এটি টেবিলের সারিগুলোর জন্য একটি স্টাইল প্রদান করে, যাতে টেবিলের কনটেন্টের প্রতি ব্যবহারকারীর দৃষ্টি আকর্ষণ করা হয়।
.highlighted: টেবিলের নির্দিষ্ট সারি হাইলাইট করার জন্য highlighted ক্লাস ব্যবহার করা হয়েছে।
Materialize CSS এর highlighted row কাস্টম স্টাইলিং করার জন্য এটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট সারিকে আলাদা ভাবে প্রদর্শন করে।

৩. Custom Highlighted Row Styling

আপনি হাইলাইটেড রো এর রঙ বা ব্যাকগ্রাউন্ড কাস্টমাইজ করতে পারেন। উদাহরণ:

<style>
  .highlighted {
    background-color: #ffeb3b; /* Yellow background for highlighted row */
    color: #000;               /* Text color */
  }
</style>

এখানে, highlighted ক্লাসের মাধ্যমে টেবিলের হাইলাইটেড সারির ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করা হয়েছে।

উপসংহার

Responsive tables এবং highlighted rows হল ওয়েব ডিজাইন এবং ডেভেলপমেন্টে ব্যবহৃত অত্যন্ত গুরুত্বপূর্ণ উপাদান। Materialize CSS এর মাধ্যমে আপনি সহজেই responsive tables তৈরি করতে পারেন, যা মোবাইল ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে এবং আপনি highlighted rows ব্যবহার করে গুরুত্বপূর্ণ ডেটা বা রেকর্ডকে আলাদা করে উপস্থাপন করতে পারবেন। Materialize CSS এর এই ফিচারগুলো ওয়েবসাইটে ডেটার প্রদর্শনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে।

Content added By

Rezwan Siddiki Tamim

Striped এবং Bordered Tables

286

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ওয়েব ডিজাইনের বিভিন্ন উপাদান এবং কম্পোনেন্ট সরবরাহ করে। এর মধ্যে tables (টেবিল) ব্যবহার করা খুবই সহজ এবং এটি ব্যবহারকারীর জন্য ডেটা বা ইনফরমেশন উপস্থাপন করতে সহায়ক। Materialize CSS-এ আপনি striped tables এবং bordered tables তৈরি করতে পারেন, যা আপনার টেবিলগুলোকে আরো সজ্জিত এবং ব্যবহারকারী-বান্ধব করে তোলে।

এখানে striped tables এবং bordered tables তৈরির পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।

Striped Tables

Striped tables এমন টেবিল যা সীমানা পরিবর্তন করে, অর্থাৎ row গুলোর ব্যাকগ্রাউন্ড রঙ পরপর পরিবর্তিত হয়। এটি ব্যবহারকারীর জন্য টেবিলের মধ্যে ডেটা দেখার প্রক্রিয়া সহজ করে তোলে, বিশেষত যখন ডেটা অনেক বেশি থাকে। Materialize CSS-এ striped table তৈরি করার জন্য আপনি .striped ক্লাস ব্যবহার করতে পারবেন।

Striped Table তৈরি করা:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Striped Table</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <div class="container">
    <table class="striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>johndoe@example.com</td>
          <td>(123) 456-7890</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>janesmith@example.com</td>
          <td>(987) 654-3210</td>
        </tr>
        <tr>
          <td>Robert Brown</td>
          <td>robertb@example.com</td>
          <td>(555) 123-4567</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // Initialize Materialize components
    $(document).ready(function() {
      // No additional initialization needed for striped tables
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

.striped: এটি Materialize CSS-এ প্রস্তুতকৃত ক্লাস, যা টেবিলের সারিগুলোর ব্যাকগ্রাউন্ড রঙ পরপর পরিবর্তিত করে। এক সারি হালকা এবং পরবর্তী সারি গা dark ় হয়ে থাকে।
thead এবং tbody: টেবিলের শিরোনাম এবং কন্টেন্ট অংশ।
টেবিলের ভিতরে tr, td এবং th এলিমেন্ট ব্যবহার করা হয়েছে।

Bordered Tables

Bordered tables এমন টেবিল যা প্রতি সেল এবং সারির চারপাশে সীমানা বা বর্ডার থাকে। এটি ডেটা উপস্থাপন করার সময় ব্যবহারকারীকে টেবিলের মধ্যে আলাদা আলাদা সেল এবং রো শনাক্ত করতে সাহায্য করে। Materialize CSS-এ bordered table তৈরি করার জন্য .bordered ক্লাস ব্যবহার করা হয়।

Bordered Table তৈরি করা:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bordered Table</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <div class="container">
    <table class="bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>johndoe@example.com</td>
          <td>(123) 456-7890</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>janesmith@example.com</td>
          <td>(987) 654-3210</td>
        </tr>
        <tr>
          <td>Robert Brown</td>
          <td>robertb@example.com</td>
          <td>(555) 123-4567</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // Initialize Materialize components
    $(document).ready(function() {
      // No additional initialization needed for bordered tables
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

.bordered: এই ক্লাসটি টেবিলের প্রতিটি সেলের চারপাশে বর্ডার তৈরি করবে।
thead এবং tbody: শিরোনাম এবং কন্টেন্ট অংশ।
এখানে tr, td, এবং th এলিমেন্ট ব্যবহার করা হয়েছে।

Combining Striped and Bordered Tables

এখন, আপনি চাইলে striped এবং bordered ক্লাস দুটি একসাথে ব্যবহার করে একটি টেবিল তৈরি করতে পারেন যা উভয় সুবিধাই প্রদান করবে — সারি পরিবর্তনশীল ব্যাকগ্রাউন্ড রঙ এবং প্রতিটি সেলের চারপাশে বর্ডার।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Striped and Bordered Table</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <div class="container">
    <table class="striped bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>johndoe@example.com</td>
          <td>(123) 456-7890</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>janesmith@example.com</td>
          <td>(987) 654-3210</td>
        </tr>
        <tr>
          <td>Robert Brown</td>
          <td>robertb@example.com</td>
          <td>(555) 123-4567</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    $(document).ready(function() {
      // Initialize Materialize components
    });
  </script>

</body>
</html>

উপসংহার

Materialize CSS এ striped tables এবং bordered tables ব্যবহার করে আপনি একটি আকর্ষণীয় এবং সংগঠিত টেবিল তৈরি করতে পারেন। Striped tables ডেটা পড়তে সুবিধা করে এবং bordered tables প্রতিটি সেলের সীমানা স্পষ্টভাবে প্রদর্শন করে। আপনি চাইলে এই দুটি ক্লাস একসাথে ব্যবহার করে আরও উন্নত এবং সুন্দর টেবিল তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য ওয়েব পেজের ডেটা দৃশ্যমান এবং সহজবোধ্য করে তোলে।

Content added By

Rezwan Siddiki Tamim

DataTables Integration এবং Custom Pagination

236

Materialize CSS একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ব্যবহারকারীর ইন্টারফেস ডিজাইনে গুরুত্বপূর্ণ ভূমিকা পালন করে। যখন আপনি ডাইনামিক ডেটা বা টেবিল প্রদর্শন করতে চান, তখন DataTables একটি শক্তিশালী টুল হিসেবে কাজ করে। DataTables একটি জনপ্রিয় জাভাস্ক্রিপ্ট প্লাগইন যা ডেটা টেবিলের জন্য উন্নত ফিচার যেমন sorting, searching, filtering, এবং pagination প্রদান করে। এই টিউটোরিয়ালে আমরা দেখব কীভাবে Materialize CSS এবং DataTables ইন্টিগ্রেট করা যায় এবং কাস্টম পেজিনেশন সেটআপ করা যায়।

DataTables Integration with Materialize CSS

DataTables একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা টেবিল ডেটাকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারে সহজ করে তোলে। Materialize CSS এর সাথে DataTables ব্যবহার করলে আপনি একটি সুন্দর এবং কার্যকরী টেবিল তৈরি করতে পারেন।

১. DataTables সেটআপ করা

প্রথমে, আপনাকে DataTables জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলো লোড করতে হবে। এটি করার জন্য CDN ব্যবহার করতে পারেন:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize and DataTables Integration</title>
  
  <!-- Materialize CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  
  <!-- DataTables CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <!-- DataTables JS -->
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

  <!-- Materialize JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <div class="container">
    <h3>Materialize + DataTables</h3>
    <table id="myTable" class="striped responsive-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>28</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>35</td>
          <td>Los Angeles</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>50</td>
          <td>Chicago</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    $(document).ready(function() {
      $('#myTable').DataTable(); // DataTables Initialization
    });
  </script>

</body>
</html>

এখানে:

Materialize CSS এবং DataTables এর জন্য CDN লিংক যুক্ত করা হয়েছে।
striped এবং responsive-table ক্লাসগুলো Materialize CSS এর স্টাইলিং সুবিধা প্রদান করে।
DataTables প্লাগইনটি $('#myTable').DataTable(); মাধ্যমে ইনিশিয়ালাইজ করা হয়েছে।

২. DataTables Features

এখন, আপনার টেবিলটি DataTables এর সমস্ত ফিচার যেমন sorting, searching, pagination এবং filtering সহ প্রদর্শিত হবে।

Sorting: আপনি যে কোনো কলামে ক্লিক করলে সেগুলো সুরুক্রম অনুযায়ী সাজানো হবে।
Searching: সার্চ বক্স ব্যবহার করে আপনি টেবিলের মধ্যে দ্রুত অনুসন্ধান করতে পারবেন।
Pagination: টেবিলের পেজিনেশন বা পৃষ্ঠা বিভাজন সুবিধা থাকবে, যা বড় ডেটাসেট পরিচালনা করতে সহায়ক।

Custom Pagination with Materialize

Custom Pagination তৈরি করা একটি সাধারণ চ্যালেঞ্জ, তবে Materialize CSS আপনাকে এর জন্য তৈরি করা স্টাইলস এবং ক্লাস প্রদান করে। আপনি যখন DataTables ব্যবহার করবেন, তখন pagination কাস্টমাইজ করতে পারেন।

১. Custom Pagination for DataTables

Materialize CSS এর pagination ক্লাস ব্যবহার করে আপনি টেবিলের জন্য কাস্টম পেজিনেশন ডিজাইন করতে পারবেন।

<ul class="pagination">
  <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
  <li class="active"><a href="#!">1</a></li>
  <li><a href="#!">2</a></li>
  <li><a href="#!">3</a></li>
  <li><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>

এখানে:

disabled: প্রথম বা শেষ পৃষ্ঠা নির্বাচিত না হলে ব্যবহার করা হয়।
active: বর্তমান নির্বাচিত পৃষ্ঠার জন্য।
material-icons: pagination আইকন হিসেবে Chevron চিহ্ন দেখায়।

২. DataTables Pagination কাস্টমাইজেশন

আপনি DataTables প্লাগইনের মাধ্যমে পেজিনেশন কাস্টমাইজ করতে পারেন যেমন:

pageLength: এক পৃষ্ঠায় কতটি রেকর্ড দেখা যাবে তা নির্ধারণ করতে পারেন।
dom: এটি টেবিলের মধ্যে পেজিনেশন, সার্চ এবং তথ্যের ব্যবস্থা কাস্টমাইজ করতে সহায়তা করে।

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "pageLength": 5, // এক পৃষ্ঠায় ৫টি রেকর্ড দেখানো হবে
      "dom": '<"top"f>rt<"bottom"ip><"clear">', // কাস্টম ডোম স্ট্রাকচার
    });
  });
</script>

এখানে:

pageLength: এক পৃষ্ঠায় প্রদর্শিত রেকর্ডের সংখ্যা নির্ধারণ করে।
dom: টেবিলের পেজিনেশন, সার্চ, এবং অন্যান্য উপাদানগুলো কাস্টমাইজ করা যায়।

৩. Custom Buttons for Pagination

কাস্টম পেজিনেশন বাটন তৈরি করতে Materialize CSS এর ক্লাস ব্যবহার করা যেতে পারে:

<div class="row">
  <div class="col s12 center">
    <button class="btn waves-effect waves-light">Previous</button>
    <button class="btn waves-effect waves-light">Next</button>
  </div>
</div>

এখানে:

waves-effect এবং waves-light ব্যবহার করে Materialize CSS এর ওয়েভ এফেক্ট যোগ করা হয়েছে।
btn ক্লাস বাটনের স্টাইলিং জন্য ব্যবহৃত।

উপসংহার

Materialize CSS এবং DataTables এর সঠিক ইন্টিগ্রেশন আপনার ওয়েবসাইটে ডাইনামিক এবং ব্যবহারকারী-বান্ধব টেবিল তৈরি করতে সহায়ক। DataTables প্লাগইন আপনার টেবিলের মধ্যে searching, sorting, filtering, এবং pagination যোগ করে, যা ব্যবহারকারীদের জন্য সুবিধাজনক। আপনি কাস্টম পেজিনেশন এবং অন্যান্য কাস্টম স্টাইল ব্যবহার করে আপনার টেবিলকে আরও উন্নত এবং আকর্ষণীয় করতে পারেন। Materialize CSS এর সাহায্যে আপনি আপনার টেবিলের ডিজাইন এবং ফিচারগুলো খুব সহজেই কাস্টমাইজ করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Materialize CSS এর পরিচিতি Materialize CSS সেটআপ এবং ইনস্টলেশন Materialize এর Grid System Materialize এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Materialize এর কালার থিম এবং কাস্টমাইজেশন

Materialize এর টেবিলস এবং ডেটা টেবিলস

Materialize এর বেসিক টেবিল

১. Basic Table Example:

Materialize এর ডেটা টেবিল

২. Data Table with Sorting Example:

৩. Data Table with Pagination Example:

৪. Data Table with Search Example:

টেবিল স্টাইলিং কাস্টমাইজেশন

উপসংহার

Materialize এর বেসিক টেবিল তৈরি করা

Materialize CSS-এ বেসিক টেবিল তৈরি করা

বেসিক টেবিল উদাহরণ:

কোড ব্যাখ্যা:

Materialize CSS-এ টেবিল কাস্টমাইজেশন

১. Responsive Table

২. Hoverable Table

৩. Bordered Table

উপসংহার

Responsive Tables এবং Highlighted Rows

Responsive Tables

১. Responsive Table তৈরি করা

কোড ব্যাখ্যা:

Highlighted Rows

২. Highlighted Row তৈরি করা

কোড ব্যাখ্যা:

৩. Custom Highlighted Row Styling

উপসংহার

Striped এবং Bordered Tables

Striped Tables

Striped Table তৈরি করা:

কোড ব্যাখ্যা:

Bordered Tables

Bordered Table তৈরি করা:

কোড ব্যাখ্যা:

Combining Striped and Bordered Tables

উপসংহার

DataTables Integration এবং Custom Pagination

DataTables Integration with Materialize CSS

১. DataTables সেটআপ করা

২. DataTables Features

Custom Pagination with Materialize

১. Custom Pagination for DataTables

২. DataTables Pagination কাস্টমাইজেশন

৩. Custom Buttons for Pagination

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!