ডেটা টেবিল (Data Table) এবং কন্টেন্ট প্রদর্শন

মেটেরিয়াল ডিজাইন লাইট (Material Design Lite) - Web Development

248

Material Design Lite (MDL) একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহার করে আপনি সহজেই Data Table এবং কন্টেন্ট প্রদর্শন করার জন্য প্রাসঙ্গিক ডিজাইন এবং স্টাইল তৈরি করতে পারেন। MDL এর ডেটা টেবিলগুলি সহজে কাস্টমাইজযোগ্য এবং ব্যবহারকারীদের জন্য সুস্পষ্ট তথ্য প্রদর্শন করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা MDL এর Data Table কম্পোনেন্ট ব্যবহার এবং কন্টেন্ট প্রদর্শন করার পদ্ধতি আলোচনা করব।

MDL Data Table ব্যবহার

Data Table ওয়েবসাইট বা অ্যাপ্লিকেশনে ডেটা প্রদর্শন করার জন্য একটি গুরুত্বপূর্ণ উপাদান। MDL এর ডেটা টেবিল ব্যবহারকারীদের জন্য একটি পরিষ্কার এবং কার্যকরী টেবিল প্রদর্শন করতে সহায়তা করে, যাতে তথ্য সহজে দেখা এবং বিশ্লেষণ করা যায়।

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">
  <!-- Google Material Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

  <!-- 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">City</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">New York</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">San Francisco</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Sara Lee</td>
        <td class="mdl-data-table__cell--non-numeric">22</td>
        <td class="mdl-data-table__cell--non-numeric">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 Data Table এর জন্য মূল ক্লাস।
mdl-js-data-table: এই ক্লাসটি Data Table এর JavaScript ফাংশনালিটি প্রয়োগ করতে ব্যবহৃত হয়।
mdl-shadow--2dp: এটি টেবিলকে কিছু গভীরতা প্রদান করে, যা Material Design স্টাইল অনুযায়ী টেবিলের শ্যাডো তৈরি করে।

এটি একটি basic data table তৈরি করবে যেখানে ব্যবহারকারীরা Name, Age, এবং City কলামগুলো দেখতে পারবেন।

MDL Data Table এর ফিচার

Selectable Rows: MDL Data Table-এ ব্যবহারকারীরা সহজে টেবিলের রো নির্বাচন করতে পারেন।
Sorting: MDL এর মাধ্যমে আপনি টেবিলের কলামগুলিতে সোরটিং ফিচার যোগ করতে পারেন।

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

MDL Data Table এর বিভিন্ন অংশ কাস্টমাইজ করা সহজ। আপনি টেবিলের শৈলী, কলাম গঠন, এবং ফাংশনালিটি সহজেই পরিবর্তন করতে পারেন।

১. Data Table এর রঙ কাস্টমাইজ করা

/* Table header রঙ পরিবর্তন */
.mdl-data-table thead {
  background-color: #2196F3; /* Blue color */
  color: white;
}

/* Table rows এর background রঙ */
.mdl-data-table tbody tr:nth-child(odd) {
  background-color: #f0f0f0; /* Light grey for odd rows */
}

.mdl-data-table tbody tr:nth-child(even) {
  background-color: #ffffff; /* White for even rows */
}

এটি টেবিলের header রঙ এবং odd/even রোগুলোর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।

২. টেবিলের সাইজ কাস্টমাইজ করা

.mdl-data-table {
  width: 80%; /* টেবিলের প্রস্থ */
  margin: 20px auto; /* টেবিলকে সেন্টার করার জন্য */
}

.mdl-data-table td,
.mdl-data-table th {
  padding: 16px; /* টেবিল সেলের padding পরিবর্তন */
}

এটি টেবিলের সাইজ এবং সেলের প্যাডিং কাস্টমাইজ করবে, যাতে টেবিলটি আরও পরিষ্কার এবং ব্যবহারযোগ্য হয়।

৩. টেবিলের কলাম সোরটিং যুক্ত করা

MDL Data Table এ কলাম সোরটিং যোগ করতে mdl-data-table--sortable ক্লাস ব্যবহার করা হয়। এই ক্লাস ব্যবহার করলে আপনি টেবিলের বিভিন্ন কলামে সোরটিং ফিচার পাবেন।

<table class="mdl-data-table mdl-js-data-table mdl-data-table--sortable 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">City</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">New York</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">San Francisco</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Sara Lee</td>
      <td class="mdl-data-table__cell--non-numeric">22</td>
      <td class="mdl-data-table__cell--non-numeric">Chicago</td>
    </tr>
  </tbody>
</table>

এটি টেবিলের কলামগুলিতে সোরটিং যোগ করবে, যাতে ব্যবহারকারীরা প্রতিটি কলামে ডেটা অ্যালফাবেটিক বা সংখ্যাগতভাবে সাজাতে পারেন।

MDL Data Table এর সুবিধা

ব্যবহারকারী-বান্ধব ডিজাইন: MDL এর Data Table খুবই সোজাসাপ্টা এবং ব্যবহারকারী-বান্ধব। এটি তথ্য সহজে প্রদর্শন করে এবং ব্যবহারকারীকে কার্যকরভাবে তথ্য বিশ্লেষণ করতে সহায়তা করে।
রেসপন্সিভ ডিজাইন: MDL Data Table রেসপন্সিভ ডিজাইন সমর্থন করে, অর্থাৎ এটি ডেস্কটপ, ট্যাবলেট এবং মোবাইল স্ক্রীনে সমানভাবে ভালো কাজ করবে।
সহজ কাস্টমাইজেশন: MDL Data Table এর স্টাইল এবং ফিচার কাস্টমাইজ করা খুবই সহজ এবং এটি ওয়েবসাইটের ডিজাইন অনুযায়ী অ্যাডজাস্ট করা যায়।
সোরটিং ও পেজিনেশন: MDL Data Table এ সোরটিং এবং পেজিনেশন ফিচার যোগ করা যায়, যা ডেটা বিশ্লেষণ এবং নেভিগেশনকে সহজ করে তোলে।

সারাংশ

Material Design Lite (MDL) এর Data Table ব্যবহার করে আপনি একটি পরিষ্কার, রেসপন্সিভ এবং কাস্টমাইজযোগ্য টেবিল তৈরি করতে পারেন। এটি তথ্য প্রদর্শন করার জন্য একটি আদর্শ উপাদান, যা ব্যবহারকারীকে সহজেই তথ্য বিশ্লেষণ করতে সহায়তা করে। MDL এর Data Table কম্পোনেন্টটি সহজে কাস্টমাইজ করা যায় এবং সোরটিং, পেজিনেশন এবং কলাম কাস্টমাইজেশন এর মতো বিভিন্ন ফিচার অন্তর্ভুক্ত করা যায়।

Content added By

Rezwan Siddiki Tamim

MDL এর Data Table Component ব্যবহার

346

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-এর মাধ্যমে আপনি ব্যবহারকারীদের জন্য একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ ডেটা প্রদর্শন সিস্টেম তৈরি করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Sortable এবং Searchable Data Table তৈরি

277

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-এর সাহায্যে, আপনি টেবিলের ডিজাইন এবং কার্যকারিতা সহজেই কাস্টমাইজ করতে পারেন এবং এটি একটি আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে সাহায্য করবে।

Content added By

Rezwan Siddiki Tamim

Pagination এবং Filtering Functionality যোগ করা

283

Material Design Lite (MDL) ব্যবহার করে আপনি সহজেই Pagination এবং Filtering ফিচার তৈরি করতে পারেন, যা বড় পরিমাণের কন্টেন্টের মধ্যে ইউজারদের সহজে নেভিগেট করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা MDL ব্যবহার করে Pagination এবং Filtering ফিচার যোগ করার পদ্ধতি দেখব।

Pagination (পেজিনেশন) কী?

Pagination হল এমন একটি পদ্ধতি, যা ব্যবহারকারীদের বৃহৎ পরিমাণের ডেটা বা কন্টেন্টের মধ্যে পেজ বাই পেজ নেভিগেট করার সুযোগ দেয়। এটি বিশেষভাবে ওয়েবসাইটে বড় লিস্ট বা টেবিলের কন্টেন্ট দেখানোর সময় ব্যবহৃত হয়, যাতে এক পেজে সব কন্টেন্ট না দেখিয়ে, একসাথে মাত্র একটি নির্দিষ্ট পরিমাণ কন্টেন্ট দেখানো হয়।

MDL-এ Pagination খুব সহজে তৈরি করা যায়, যেহেতু MDL-এ এর জন্য প্রস্তুত স্টাইলিং এবং ফাংশনালিটি আছে।

MDL Pagination উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Pagination Example</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Content List -->
  <ul class="mdl-list">
    <li class="mdl-list__item">Item 1</li>
    <li class="mdl-list__item">Item 2</li>
    <li class="mdl-list__item">Item 3</li>
    <li class="mdl-list__item">Item 4</li>
    <li class="mdl-list__item">Item 5</li>
    <li class="mdl-list__item">Item 6</li>
    <li class="mdl-list__item">Item 7</li>
    <li class="mdl-list__item">Item 8</li>
    <li class="mdl-list__item">Item 9</li>
    <li class="mdl-list__item">Item 10</li>
  </ul>

  <!-- Pagination -->
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Prev
      </button>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <span>Page 1 of 3</span>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Next
      </button>
    </div>
  </div>

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

ব্যাখ্যা:

mdl-list: MDL এর লিস্ট তৈরি করার জন্য ব্যবহৃত ক্লাস।
mdl-list__item: লিস্টের প্রতিটি আইটেমের জন্য ব্যবহৃত ক্লাস।
mdl-button: পেজিনেশন বাটন তৈরির জন্য ব্যবহৃত ক্লাস।
mdl-grid এবং mdl-cell: পেজিনেশন বাটনগুলিকে সঠিকভাবে সজ্জিত করতে ব্যবহৃত গ্রিড সিস্টেম।

এটি একটি সিম্পল পেজিনেশন তৈরি করবে যেখানে Prev এবং Next বাটনসহ পেজ নম্বর দেখানো হবে।

Filtering (ফিল্টারিং) কী?

Filtering হলো একটি প্রক্রিয়া যা ব্যবহারকারীদের বড় ডেটাসেটের মধ্যে নির্দিষ্ট তথ্য বা কন্টেন্ট খুঁজে বের করতে সহায়তা করে। এটি সাধারণত ওয়েবসাইটে লিস্ট, টেবিল, বা ডেটার অন্যান্য আকারে ব্যবহার হয়।

MDL-এ Filtering ফিচার যোগ করার জন্য, আপনি input ফিল্ড এবং JavaScript ব্যবহার করতে পারেন, যা ডাইনামিকভাবে কন্টেন্ট ফিল্টার করে।

MDL Filtering উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Filtering Example</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Filter Input -->
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="filter-input" oninput="filterList()">
    <label class="mdl-textfield__label" for="filter-input">Filter Items...</label>
  </div>

  <!-- Content List -->
  <ul class="mdl-list" id="item-list">
    <li class="mdl-list__item">Item 1</li>
    <li class="mdl-list__item">Item 2</li>
    <li class="mdl-list__item">Item 3</li>
    <li class="mdl-list__item">Item 4</li>
    <li class="mdl-list__item">Item 5</li>
    <li class="mdl-list__item">Item 6</li>
  </ul>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    function filterList() {
      var input = document.getElementById("filter-input");
      var filter = input.value.toUpperCase();
      var ul = document.getElementById("item-list");
      var li = ul.getElementsByTagName("li");

      for (var i = 0; i < li.length; i++) {
        var item = li[i];
        if (item.innerHTML.toUpperCase().indexOf(filter) > -1) {
          item.style.display = "";
        } else {
          item.style.display = "none";
        }
      }
    }
  </script>
</body>
</html>

ব্যাখ্যা:

mdl-textfield: MDL এর টেক্সট ইনপুট ফিল্ড তৈরি করার জন্য ব্যবহৃত ক্লাস।
oninput="filterList()": ইনপুট ফিল্ডে টাইপ করার সাথে সাথে filterList() ফাংশন কল করা হবে, যা কন্টেন্ট ফিল্টার করবে।
filterList(): JavaScript ফাংশন, যা লিস্টের আইটেমগুলিকে ইনপুট অনুসারে ফিল্টার করে।

এই কোডটি একটি filtering ফিচার তৈরি করবে, যেখানে ব্যবহারকারী ইনপুট ফিল্ডে লিখলে, কেবলমাত্র সেগুলিই প্রদর্শিত হবে যেগুলি ফিল্টারের সাথে মিলে।

Pagination এবং Filtering একসাথে ব্যবহার করা

Pagination এবং Filtering একসাথে ব্যবহার করে আপনি আরও উন্নত এবং ইন্টারঅ্যাকটিভ কন্টেন্ট প্রদর্শন ব্যবস্থা তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি পেজের কন্টেন্টের মধ্যে Pagination দিয়ে বিভক্ত করা এবং Filtering ফিচারের মাধ্যমে ব্যবহারকারীদের দ্রুত নির্দিষ্ট কন্টেন্ট খুঁজে বের করার সুবিধা দেওয়া।

উদাহরণ: Pagination এবং Filtering একসাথে

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination & Filtering</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Filter Input -->
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="filter-input" oninput="filterList()">
    <label class="mdl-textfield__label" for="filter-input">Search Items...</label>
  </div>

  <!-- Content List -->
  <ul class="mdl-list" id="item-list">
    <li class="mdl-list__item">Item 1</li>
    <li class="mdl-list__item">Item 2</li>
    <li class="mdl-list__item">Item 3</li>
    <li class="mdl-list__item">Item 4</li>
    <li class="mdl-list__item">Item 5</li>
    <li class="mdl-list__item">Item 6</li>
    <li class="mdl-list__item">Item 7</li>
    <li class="mdl-list__item">Item 8</li>
    <li class="mdl-list__item">Item 9</li>
    <li class="mdl-list__item">Item 10</li>
  </ul>

  <!-- Pagination -->
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Prev
      </button>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <span>Page 1 of 3</span>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Next
      </button>
    </div>
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    function filterList() {
      var input = document.getElementById("filter-input");
      var filter = input.value.toUpperCase();
      var ul = document.getElementById("item-list");
      var li = ul.getElementsByTagName("li");

      for (var i = 0; i < li.length; i++) {
        var item = li[i];
        if (item.innerHTML.toUpperCase().indexOf(filter) > -1) {
          item.style.display = "";
        } else {
          item.style.display = "none";
        }
      }
    }
  </script>

</body>
</html>

সারাংশ

Pagination এবং Filtering ফিচার MDL ব্যবহার করে খুবই সহজে তৈরি করা যায়। Pagination ব্যবহারকারীদের কন্টেন্টের মধ্যে পেজ বাই পেজ নেভিগেট করার সুযোগ দেয়, এবং Filtering ব্যবহারকারীদের নির্দিষ্ট কন্টেন্ট খুঁজে বের করার সহায়তা করে। MDL-এ pagination এবং filtering সহজে কাস্টমাইজ করা যায় এবং এগুলো আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার অভিজ্ঞতা উন্নত করতে সাহায্য করে।

Content added By

Rezwan Siddiki Tamim

Custom Data Table Layouts এবং Styles

271

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 কার্যকারিতা ব্যবহার করে আপনি টেবিলের রঙ, আকার, প্যাডিং, হোভার ইফেক্ট এবং আরো অনেক কিছু কাস্টমাইজ করতে পারবেন। এটি আপনার ওয়েব পেজকে আরো ব্যবহারকারী-বান্ধব এবং আধুনিক করে তোলে।

Content added By

Rezwan Siddiki Tamim

Material Design Lite (MDL) পরিচিতি Material Design Lite সেটআপ এবং ইনস্টলেশন MDL এর গ্রিড সিস্টেম টিপোগ্রাফি (Typography) এবং রঙ (Color) ব্যবস্থাপনা MDL এর বাটন (Button) এবং আইকন (Icon) ব্যবস্থাপনা

ডেটা টেবিল (Data Table) এবং কন্টেন্ট প্রদর্শন

MDL Data Table ব্যবহার

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

ব্যাখ্যা:

MDL Data Table এর ফিচার

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

১. Data Table এর রঙ কাস্টমাইজ করা

২. টেবিলের সাইজ কাস্টমাইজ করা

৩. টেবিলের কলাম সোরটিং যুক্ত করা

MDL Data Table এর সুবিধা

সারাংশ

MDL এর Data Table Component ব্যবহার

MDL Data Table Component

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

ব্যাখ্যা:

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

১. টেবিলের সাইজ পরিবর্তন

উদাহরণ: সোর্টেবল Data Table

২. টেবিল সেল সিলেকশন সক্ষম করা

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

৩. টেবিলের হেডিং স্টাইল পরিবর্তন

MDL Data Table এর অন্যান্য বৈশিষ্ট্য

১. Pagination

২. Sorting

৩. Search

সারাংশ

Sortable এবং Searchable Data Table তৈরি

MDL এর Sortable Data Table তৈরি করা

উদাহরণ: Sortable Data Table

ব্যাখ্যা:

MDL এর Searchable Data Table তৈরি করা

উদাহরণ: Searchable Data Table

ব্যাখ্যা:

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

১. Table Row Selection

২. Column Sorting

সারাংশ

Pagination এবং Filtering Functionality যোগ করা

Pagination (পেজিনেশন) কী?

MDL Pagination উদাহরণ

ব্যাখ্যা:

Filtering (ফিল্টারিং) কী?

MDL Filtering উদাহরণ

ব্যাখ্যা:

Pagination এবং Filtering একসাথে ব্যবহার করা

উদাহরণ: Pagination এবং Filtering একসাথে

সারাংশ

Custom Data Table Layouts এবং Styles

MDL Data Table তৈরি করা

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

ব্যাখ্যা:

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

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

২. Row Color এবং Hover Effect

৩. Sorting and Pagination

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

১. Responsive Table Layout

২. Custom Pagination

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!