Material Design Lite (MDL) এর Data Table Component ব্যবহার করে আপনি সহজে একটি সুশৃঙ্খল, রেসপন্সিভ এবং আধুনিক ডেটা টেবিল তৈরি করতে পারেন। MDL-এর Data Table কম্পোনেন্টটি ব্যবহারকারীদের বিভিন্ন ধরনের ডেটা প্রদর্শন করার জন্য একটি কার্যকরী উপায়। এই টিউটোরিয়ালে, আমরা MDL এর Data Table Component তৈরি করার পদ্ধতি এবং এর কাস্টমাইজেশন দেখব।
MDL Data Table Component
MDL এর Data Table একটি টেবিল কম্পোনেন্ট যা ডেটা সুশৃঙ্খলভাবে এবং ব্যবহারকারী-বান্ধবভাবে প্রদর্শন করতে সাহায্য করে। এটি সাধারণভাবে বড় বড় ডেটা সেট বা টেবিলের তথ্যগুলো একাধিক কলাম এবং সারিতে সাজানোর জন্য ব্যবহৃত হয়।
MDL Data Table এর সাধারণ কাঠামো
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Data Table</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- 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>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">John</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Alice</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Bob</td>
<td>28</td>
<td>Chicago</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 এর জাভাস্ক্রিপ্ট ফাংশনালিটি প্রয়োগ করে।
- mdl-shadow--2dp: এটি টেবিলের জন্য একটি সুন্দর শ্যাডো যোগ করে, যা ডিজাইনকে আরও আকর্ষণীয় করে তোলে।
- mdl-data-table__cell--non-numeric: এটি কোনো টেবিল সেলে টেক্সট ভ্যালু ব্যবহৃত হলে এই ক্লাসটি যোগ করা হয়। এটি সাধারণত নন-নিউমেরিক ডেটা জন্য ব্যবহৃত হয়, যেমন নাম বা অন্যান্য তথ্য।
এই টেবিলটি সাধারণ একটি ডেটা টেবিল তৈরি করবে, যেখানে তিনটি কলাম (Name, Age, City) থাকবে এবং কিছু ডেটা প্রদর্শিত হবে।
MDL Data Table কাস্টমাইজেশন
MDL Data Table কম্পোনেন্টটি খুবই কাস্টমাইজেবল। আপনি টেবিলের স্টাইল, কলামের সাইজ, টেবিলের হেডিং এবং সেলগুলোর স্টাইল পরিবর্তন করতে পারেন।
১. টেবিলের সাইজ পরিবর্তন
MDL Data Table-এর সাইজ পরিবর্তন করতে mdl-data-table--sortable ক্লাস ব্যবহার করা যেতে পারে, যার মাধ্যমে আপনি টেবিলকে সোর্টেবল করতে পারবেন। এছাড়া mdl-data-table--selectable ক্লাস ব্যবহার করে আপনি সেল সিলেকশন সক্ষম করতে পারেন।
উদাহরণ: সোর্টেবল Data Table
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-data-table--sortable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">John</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Alice</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Bob</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
এটি একটি সোর্টেবল টেবিল তৈরি করবে, যার মাধ্যমে ব্যবহারকারী সহজেই টেবিলের কলাম অনুযায়ী সোর্ট করতে পারবেন।
২. টেবিল সেল সিলেকশন সক্ষম করা
MDL Data Table-এ সেল সিলেকশন সক্ষম করতে আপনি mdl-data-table--selectable ক্লাস ব্যবহার করতে পারেন।
উদাহরণ: সিলেক্টেবল Data Table
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-data-table--selectable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">John</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Alice</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Bob</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
এটি একটি সিলেক্টেবল টেবিল তৈরি করবে, যেখানে ব্যবহারকারী সহজে একটি বা একাধিক সেল নির্বাচন করতে পারবেন।
৩. টেবিলের হেডিং স্টাইল পরিবর্তন
.mdl-data-table th {
background-color: #4caf50; /* Green background for header */
color: white; /* White text */
}
এটি টেবিলের হেডিংয়ের ব্যাকগ্রাউন্ড এবং টেক্সট রঙ পরিবর্তন করবে।
MDL Data Table এর অন্যান্য বৈশিষ্ট্য
১. Pagination
MDL-এ ডেটা টেবিলের পেজিনেশন ব্যবস্থাও সহজে প্রয়োগ করা যেতে পারে। পেজিনেশন ব্যবহার করে আপনি ডেটা একাধিক পৃষ্ঠায় ভাগ করতে পারেন, যাতে টেবিলের লোডিং দ্রুত হয়।
২. Sorting
MDL Data Table এর sorting বৈশিষ্ট্য ব্যবহারকারীকে কলাম অনুযায়ী ডেটা সজ্জিত করতে সহায়তা করে।
৩. Search
MDL Data Table-এ searching ফিচার যোগ করা যায়, যার মাধ্যমে ব্যবহারকারী সহজেই টেবিলের মধ্যে ডেটা খুঁজে পেতে পারেন।
সারাংশ
Material Design Lite (MDL) এর Data Table Component ব্যবহারকারীদের জন্য খুবই কার্যকরী একটি টুল, যা ডেটাকে সুন্দরভাবে এবং সুশৃঙ্খলভাবে প্রদর্শন করতে সহায়তা করে। MDL Data Table-এ আপনি sortable, selectable, এবং paginated টেবিল তৈরি করতে পারেন। এটি অত্যন্ত কাস্টমাইজযোগ্য এবং MDL এর সিএসএস এবং ক্লাস ব্যবহার করে আপনি টেবিলের ডিজাইন পরিবর্তন করতে পারেন। MDL Data Table-এর মাধ্যমে আপনি ব্যবহারকারীদের জন্য একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ ডেটা প্রদর্শন সিস্টেম তৈরি করতে পারবেন।
Read more
