Data Table কী
Data Table (ডাটা টেবিল) হল একটি টেবিল ভিত্তিক কন্টেন্ট প্রদর্শন পদ্ধতি যেখানে বিভিন্ন ধরনের ডেটা সারি (row) এবং কলাম (column) আকারে গুছিয়ে দেখানো হয়। HTML ট্যাগ যেমন <table>, <tr>, <th>, <td> ব্যবহার করে সহজেই একটি স্থির Data Table তৈরি করা যায়। এই টেবিলগুলো সাধারণত বিভিন্ন তথ্য যেমন পণ্যের তালিকা, ইউজারের তথ্য, পরিসংখ্যান, রিপোর্ট ইত্যাদি প্রদর্শনে উপযোগী।
স্থির HTML Data Table তৈরি
HTML দিয়ে একটি সাধারণ Data Table তৈরি করতে নিচের উদাহরণটি দেখা যেতে পারে:
<table>
<thead>
<tr>
<th>পণ্যের নাম (Product Name)</th>
<th>দাম (Price)</th>
<th>পরিমাণ (Quantity)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$2</td>
<td>50</td>
</tr>
<tr>
<td>Orange</td>
<td>$3</td>
<td>30</td>
</tr>
</tbody>
</table>
উপরের উদাহরণে <thead> ট্যাগ শিরোনাম (Header) অংশ এবং <tbody> ট্যাগ মূল ডেটা (Data Rows) ধরে রাখে।
Dynamic Table কী
Dynamic Table (ডায়নামিক টেবিল) হল এমন একটি টেবিল যা JavaScript বা অন্য কোনো ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক (যেমন Vue, React, বা Framework7) ব্যবহার করে স্বয়ংক্রিয়ভাবে ডেটা যুক্ত, মুছে ফেলা বা আপডেট করতে পারে। ডেভেলপাররা Ajax/Fetch API এর মাধ্যমে সার্ভার থেকে ডেটা নিয়ে টেবিলে দেখাতে পারে, বা ইউজার ইনপুটের ভিত্তিতে ডেটা পরিবর্তন করতে পারে।
JavaScript ব্যবহার করে Dynamic Table তৈরি
নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি খালি <tbody> এ JavaScript ব্যবহার করে ডেটা যুক্ত করা হচ্ছে:
<table id="productTable">
<thead>
<tr>
<th>পণ্যের নাম (Product Name)</th>
<th>দাম (Price)</th>
<th>পরিমাণ (Quantity)</th>
</tr>
</thead>
<tbody>
<!-- ডায়নামিকভাবে ডেটা যুক্ত হবে -->
</tbody>
</table>
<script>
const products = [
{ name: 'Apple', price: '$2', quantity: 50 },
{ name: 'Orange', price: '$3', quantity: 30 }
];
const tableBody = document.querySelector('#productTable tbody');
products.forEach(product => {
const row = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = product.name;
row.appendChild(nameCell);
const priceCell = document.createElement('td');
priceCell.textContent = product.price;
row.appendChild(priceCell);
const qtyCell = document.createElement('td');
qtyCell.textContent = product.quantity;
row.appendChild(qtyCell);
tableBody.appendChild(row);
});
</script>
উপরের উদাহরণে products নামে একটি Array থেকে ডেটা নিয়ে <tbody>-তে সারি তৈরি করা হয়েছে। এই পদ্ধতি ব্যবহার করে Ajax/Fetch এর মাধ্যমে সার্ভার থেকে ডেটা নিয়ে আসা যায় ও টেবিল আপডেট করা যায়।
Data Table আরও উন্নত করা
Dynamic Table তৈরি করার পর আপনি নিচের কাজগুলো করতে পারেন:
সার্চ (Search) ফিল্টার যোগ
ইউজার ইনপুটের ভিত্তিতে JavaScript ব্যবহার করে টেবিলের সারি ফিল্টার করা যায়, যাতে ব্যবহারকারী সহজেই ডেটা খুঁজে পায়।
পেজিনেশন (Pagination)
বড় পরিমাণ ডেটা ছোট ছোট ভাগে দেখাতে Pagination ব্যবহার করা যায়, যাতে প্রতিবার কিছু সংখ্যক রেকর্ড দেখানো হয়।
সোর্টিং (Sorting)
কলামের শিরোনামে ক্লিক করে উর্ধ্বক্রমে বা নিন্মক্রমে সজ্জিত করা যায়, যাতে ডেটা দেখা সহজ হয়।
Dynamic Table আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ, ব্যবহারবান্ধব এবং ডেটা-চালিত করে তুলতে সাহায্য করে। JavaScript এবং ফ্রন্ট-এন্ড লাইব্রেরি বা ফ্রেমওয়ার্ক ব্যবহার করে ডেটা লোড, আপডেট, এবং পরিচালনা করা সহজ হয়।
Read more
