Custom Data Table Layouts এবং Styles

Material Design Lite (MDL) ব্যবহার করে কাস্টম Data Table তৈরি করা খুবই সহজ এবং এটি আপনার ওয়েব পেজকে আরো ব্যবহারকারী-বান্ধব এবং সুন্দর করে তোলে। MDL এর Data Table কম্পোনেন্ট আপনার ডেটাকে একটি সুশৃঙ্খল এবং আকর্ষণীয়ভাবে প্রদর্শন করতে সহায়তা করে। এখানে আমরা MDL ব্যবহার করে Custom Data Table Layouts এবং Styles কাস্টমাইজ করার পদ্ধতি আলোচনা করব।

MDL Data Table তৈরি করা

MDL এ Data Table তৈরি করতে, আমরা mdl-data-table এবং সংশ্লিষ্ট ক্লাসগুলো ব্যবহার করি, যা ডেটাকে সজ্জিত এবং সুন্দরভাবে প্রদর্শন করতে সাহায্য করে। MDL Data Table এ sorting, pagination, এবং searching এর মত বৈশিষ্ট্যও অন্তর্ভুক্ত করা যায়।

MDL Data Table এর সাধারণ কাঠামো

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th class="mdl-data-table__cell--non-numeric">Age</th>
      <th class="mdl-data-table__cell--non-numeric">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">John Doe</td>
      <td class="mdl-data-table__cell--non-numeric">25</td>
      <td class="mdl-data-table__cell--non-numeric">USA</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Jane Smith</td>
      <td class="mdl-data-table__cell--non-numeric">30</td>
      <td class="mdl-data-table__cell--non-numeric">UK</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Amit Kumar</td>
      <td class="mdl-data-table__cell--non-numeric">28</td>
      <td class="mdl-data-table__cell--non-numeric">India</td>
    </tr>
  </tbody>
</table>

<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

• mdl-data-table: এটি MDL Data Table তৈরি করার জন্য প্রধান ক্লাস।
• mdl-js-data-table: এটি MDL Data Table এর কার্যকারিতা সক্রিয় করার জন্য JavaScript ক্লাস।
• mdl-data-table__cell--non-numeric: এটি টেবিলের সেলকে টেক্সট হিসেবে স্টাইল করতে ব্যবহৃত হয়। সাধারণভাবে MDL Data Table সংখ্যাসূচক এবং অ-সংখ্যাসূচক ডেটা আলাদা করে।

এটি একটি সাধারণ Data Table তৈরি করবে যেখানে ব্যবহারকারীরা ডেটা দেখতে পারবেন।

MDL Data Table কাস্টমাইজেশন

MDL Data Table ব্যবহার করার সময় আপনি বিভিন্ন ক্লাস এবং CSS ব্যবহার করে layouts এবং styles কাস্টমাইজ করতে পারেন।

১. Data Table Header কাস্টমাইজেশন

MDL Data Table এর হেডার কাস্টমাইজ করার জন্য আপনি mdl-data-table__header এবং mdl-data-table__cell--non-numeric ক্লাস ব্যবহার করতে পারেন।

/* Table header background color */
.mdl-data-table__header {
  background-color: #4caf50;
  color: white;
}

/* Table header text style */
.mdl-data-table__cell--non-numeric {
  font-weight: bold;
}

এটি টেবিলের হেডারটিকে সবুজ এবং লেখাগুলোকে বোল্ড করবে।

২. Row Color এবং Hover Effect

আপনি টেবিলের রোয়ের রঙ এবং hover ইফেক্ট কাস্টমাইজ করতে পারেন:

/* Row hover effect */
.mdl-data-table__row:hover {
  background-color: #f5f5f5;
}

/* Even row background color */
.mdl-data-table__row:nth-child(even) {
  background-color: #e0e0e0;
}

এটি row hover effect যোগ করবে এবং even rows এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।

৩. Sorting and Pagination

MDL Data Table সাধারণত sorting এবং pagination এর জন্য JavaScript ব্যবহার করে। আপনি MDL Data Table এ সোর্টিং এবং পেজিনেশন ফিচার যোগ করতে পারেন।

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th class="mdl-data-table__cell--non-numeric">Age</th>
      <th class="mdl-data-table__cell--non-numeric">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">John Doe</td>
      <td class="mdl-data-table__cell--non-numeric">25</td>
      <td class="mdl-data-table__cell--non-numeric">USA</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Jane Smith</td>
      <td class="mdl-data-table__cell--non-numeric">30</td>
      <td class="mdl-data-table__cell--non-numeric">UK</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Amit Kumar</td>
      <td class="mdl-data-table__cell--non-numeric">28</td>
      <td class="mdl-data-table__cell--non-numeric">India</td>
    </tr>
  </tbody>
</table>

এটি selectable rows এবং pagination ফিচার যুক্ত করবে, যাতে ব্যবহারকারীরা সহজেই ডেটা সিলেক্ট এবং পৃষ্ঠা পরিবর্তন করতে পারেন।

MDL Data Table কাস্টম স্টাইলিং

MDL Data Table এর মাধ্যমে আপনি কাস্টম স্টাইলিংসহ অনেক ধরনের টেবিল তৈরি করতে পারবেন। এই টেবিলগুলো responsive, attractive, এবং interactive হতে পারে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

১. Responsive Table Layout

MDL Data Table এর রেসপন্সিভ লেআউট তৈরি করতে, আপনি mdl-data-table এর সাথে mdl-shadow--2dp ক্লাস এবং media queries ব্যবহার করতে পারেন।

/* For small screen sizes */
@media (max-width: 600px) {
  .mdl-data-table {
    font-size: 12px;
  }
}

এটি ছোট স্ক্রীনের জন্য টেবিলের ফন্ট সাইজ কমিয়ে দিবে, যা মোবাইল এবং ট্যাবলেট ডিভাইসে ভালো প্রদর্শিত হবে।

২. Custom Pagination

MDL Data Table এর পেজিনেশনকে কাস্টমাইজ করতে mdl-pagination ক্লাস ব্যবহার করতে পারেন।

<div class="mdl-pagination">
  <button class="mdl-button mdl-js-button">Previous</button>
  <button class="mdl-button mdl-js-button">Next</button>
</div>

এটি Next এবং Previous বাটন তৈরি করবে, যা ব্যবহারকারীকে টেবিলের পরবর্তী বা পূর্ববর্তী পৃষ্ঠায় নেভিগেট করতে সহায়তা করবে।

সারাংশ

Material Design Lite (MDL) এর Data Table কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই কাস্টম টেবিল তৈরি করতে পারেন, যা ডেটাকে সুশৃঙ্খল এবং আকর্ষণীয়ভাবে প্রদর্শন করে। MDL-এর মাধ্যমে আপনি টেবিলের layouts, styles, sorting, pagination এবং searching ফিচার কাস্টমাইজ করতে পারেন। MDL Data Table কম্পোনেন্টে CSS ক্লাস এবং JavaScript কার্যকারিতা ব্যবহার করে আপনি টেবিলের রঙ, আকার, প্যাডিং, হোভার ইফেক্ট এবং আরো অনেক কিছু কাস্টমাইজ করতে পারবেন। এটি আপনার ওয়েব পেজকে আরো ব্যবহারকারী-বান্ধব এবং আধুনিক করে তোলে।