Material Design Lite (MDL) একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহার করে আপনি খুব সহজেই sortable এবং searchable ডেটা টেবিল তৈরি করতে পারেন। এই ধরনের টেবিল ব্যবহারের মাধ্যমে আপনি ডেটাকে আরও কার্যকরভাবে পরিচালনা করতে পারেন, যেখানে ব্যবহারকারী টেবিলের ডেটা সোর্ট করতে পারবেন এবং তাদের প্রয়োজনীয় তথ্য খুঁজে পেতে একটি সার্চ ফিচার ব্যবহার করতে পারবেন।
এই টিউটোরিয়ালে, আমরা MDL ব্যবহার করে sortable এবং searchable ডেটা টেবিল তৈরি করার পদ্ধতি দেখব।
MDL এর Sortable Data Table তৈরি করা
Sortable Data Table হল এমন একটি টেবিল, যার কলামগুলির উপর ক্লিক করার মাধ্যমে ডেটা সাইজ, নাম বা অন্যান্য ক্রম অনুসারে সাজানো যেতে পারে। MDL-এ টেবিলের হেডারে ক্লিক করলে আপনি ডেটাকে Ascending বা Descending অর্ডারে সাজাতে পারবেন।
উদাহরণ: Sortable Data Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable Data Table</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Sortable 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</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</td>
<td class="mdl-data-table__cell--non-numeric">28</td>
<td class="mdl-data-table__cell--non-numeric">UK</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Mark</td>
<td class="mdl-data-table__cell--non-numeric">30</td>
<td class="mdl-data-table__cell--non-numeric">Canada</td>
</tr>
</tbody>
</table>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-data-table: এটি MDL এর টেবিল কম্পোনেন্টের জন্য মূল ক্লাস।
- mdl-js-data-table: টেবিলের ফাংশনালিটি যোগ করার জন্য ব্যবহৃত ক্লাস।
- mdl-data-table__cell--non-numeric: টেবিলের কলামগুলোতে টেক্সট ডেটা প্রদর্শন করার জন্য ব্যবহৃত ক্লাস।
- mdl-shadow--2dp: এটি টেবিলকে শ্যাডো এফেক্ট দেয়, যাতে এটি আরো স্টাইলিশ দেখায়।
এটি একটি সোজাসাপ্টা sortable table তৈরি করবে, যেখানে ব্যবহারকারী প্রতিটি কলামের উপর ক্লিক করলে ডেটা Ascending বা Descending অর্ডারে সজ্জিত হবে।
MDL এর Searchable Data Table তৈরি করা
Searchable Data Table হল এমন একটি টেবিল, যেখানে ব্যবহারকারী একটি সার্চ বক্সের মাধ্যমে নির্দিষ্ট তথ্য খুঁজে পেতে পারেন। MDL-এ searchable data table তৈরি করার জন্য আমরা সাধারণত JavaScript ব্যবহার করি, যাতে ব্যবহারকারী টেবিলের মধ্যে নির্দিষ্ট কন্টেন্ট খুঁজে পেতে পারেন।
উদাহরণ: Searchable Data Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searchable Data Table</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Search Box -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" placeholder="Search...">
</div>
</div>
<!-- Searchable Data Table -->
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="data-table">
<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</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</td>
<td class="mdl-data-table__cell--non-numeric">28</td>
<td class="mdl-data-table__cell--non-numeric">UK</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Mark</td>
<td class="mdl-data-table__cell--non-numeric">30</td>
<td class="mdl-data-table__cell--non-numeric">Canada</td>
</tr>
</tbody>
</table>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
// Search functionality
document.getElementById('search').addEventListener('input', function() {
var searchTerm = this.value.toLowerCase();
var rows = document.getElementById('data-table').getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
if (cells.length > 0) {
var name = cells[0].textContent.toLowerCase();
var age = cells[1].textContent.toLowerCase();
var country = cells[2].textContent.toLowerCase();
if (name.indexOf(searchTerm) > -1 || age.indexOf(searchTerm) > -1 || country.indexOf(searchTerm) > -1) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- mdl-textfield mdl-js-textfield mdl-textfield--expandable: এটি একটি সার্চ বক্স তৈরি করার জন্য ব্যবহৃত ক্লাস।
- input: এখানে ব্যবহারকারী যে শব্দটি সার্চ করবে তা এই ইনপুট ফিল্ডে লিখবে।
- mdl-data-table mdl-js-data-table: এটি MDL এর ডেটা টেবিল কম্পোনেন্টের জন্য ব্যবহৃত ক্লাস।
- JavaScript: টেবিলের সারিগুলি সার্চের মাধ্যমে ফিল্টার করার জন্য JavaScript ব্যবহার করা হয়েছে।
এটি একটি searchable table তৈরি করবে, যেখানে ব্যবহারকারী একটি সার্চ বাক্স ব্যবহার করে টেবিলের মধ্যে তথ্য খুঁজে পেতে পারবেন।
MDL Data Table এর কাস্টমাইজেশন
MDL Data Table খুবই কাস্টমাইজেবল এবং আপনাকে নিজের প্রয়োজন অনুযায়ী টেবিলের ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করতে সহায়তা করে। কিছু কাস্টমাইজেশন রয়েছে:
১. Table Row Selection
MDL-এ আপনি টেবিলের রো সিলেক্ট করার ফিচারও যোগ করতে পারেন।
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
<!-- Table Content -->
</table>
এটি টেবিলের রো সিলেকশন সক্ষম করবে, যেখানে ব্যবহারকারী রো সিলেক্ট করে ডেটা দেখতে পারবে।
২. Column Sorting
MDL টেবিলের মধ্যে কলাম সোর্টিং ফিচার যোগ করা যায়, যা ব্যবহারকারীকে টেবিলের ডেটা সজ্জিত করতে সহায়তা করে। এটি MDL-এর ফিচার হিসাবে আগেই অন্তর্ভুক্ত থাকে।
সারাংশ
Material Design Lite (MDL) ব্যবহার করে Sortable এবং Searchable ডেটা টেবিল তৈরি করা সহজ এবং কার্যকর। Sortable Data Table ব্যবহারকারীকে ডেটা সজ্জিত করতে সহায়তা করে এবং Searchable Data Table ব্যবহারকারীকে নির্দিষ্ট তথ্য খুঁজে পেতে সাহায্য করে। MDL-এর সাহায্যে, আপনি টেবিলের ডিজাইন এবং কার্যকারিতা সহজেই কাস্টমাইজ করতে পারেন এবং এটি একটি আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে সাহায্য করবে।
Read more
