Bootstrap 5 এর টেবিলস এবং ডেটা টেবিলস

বুটস্ট্রাপ (Bootstrap 5) - Web Development

417

বুটস্ট্রাপ ৫ টেবিল (Tables) উপাদানটি ওয়েবসাইটের মধ্যে ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি একটি সুসংগঠিত এবং রেসপন্সিভ পদ্ধতিতে তথ্য উপস্থাপন করতে সাহায্য করে। টেবিলগুলোর ডিজাইনকে সুন্দর এবং ফাংশনাল করে তোলার জন্য বুটস্ট্রাপ অনেক ধরনের বিল্ট-ইন ক্লাস প্রদান করেছে।

এছাড়া, ডেটা টেবিলস (Data Tables) ব্যবহার করে আপনি টেবিলের তথ্যের উপর ফিল্টার, সার্চ, সোর্টিং এবং পেজিনেশন করতে পারেন, যা ডাইনামিক ডেটা পরিচালনার জন্য অত্যন্ত উপকারী।

বুটস্ট্রাপ টেবিলস (Bootstrap Tables)

বুটস্ট্রাপের টেবিল খুবই সহজ এবং দ্রুত কনফিগার করা যায়। টেবিলের জন্য কিছু মূল ক্লাস রয়েছে যা টেবিলের স্টাইল এবং লেআউট কাস্টমাইজ করে।

টেবিলের প্রধান ক্লাসসমূহ:

table: একটি সাধারণ টেবিল তৈরি করার জন্য ব্যবহার হয়।
table-striped: টেবিলের সারি গুলোতে হালকা-ডার্ক স্ট্রাইপ ইফেক্ট যোগ করে।
table-bordered: টেবিলের সেলগুলোর চারপাশে সীমানা তৈরি করে।
table-hover: টেবিল সেলগুলোর উপর হোভার করলে হালকা শেড দেখায়।
table-sm: টেবিলের সেল গুলোকে ছোট আকারে দেখায়।
table-dark: টেবিলের ব্যাকগ্রাউন্ড কালো (ডার্ক) করে।
table-responsive: রেসপন্সিভ টেবিল তৈরি করার জন্য এটি ব্যবহার করা হয় যাতে স্ক্রীনের আকার পরিবর্তন করলে টেবিল হরিজেন্টালি স্ক্রল করতে পারে।

উদাহরণ: বুটস্ট্রাপ টেবিল

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Simple Table -->
    <div class="container mt-5">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>টেলিফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>+880123456789</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>জেন স্মিথ</td>
                    <td>jane@example.com</td>
                    <td>+880987654321</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>রামু মিয়া</td>
                    <td>ramu@example.com</td>
                    <td>+880556677889</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ডেটা টেবিলস (Data Tables)

ডেটা টেবিলস (Data Tables) হল ডাইনামিক টেবিল যেখানে আপনি বিভিন্ন ফিচার ব্যবহার করে ডেটার উপর কাজ করতে পারেন, যেমন ফিল্টারিং, সার্চ, সোর্টিং এবং পেজিনেশন। বুটস্ট্রাপ শুধুমাত্র টেবিলের জন্য স্টাইলিং প্রদান করে, কিন্তু DataTables.js লাইব্রেরি ব্যবহার করে এগুলোকে আরও উন্নত করা যায়।

DataTables.js হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনার টেবিলকে ডাইনামিক, সার্চেবল, এবং ইন্টারেক্টিভ করে তোলে।

DataTables.js ব্যবহার করার উদাহরণ

DataTables.js লাইব্রেরি যুক্ত করা: প্রথমে আপনাকে DataTables.js এর CSS এবং JS ফাইল লোড করতে হবে।
টেবিল কনফিগারেশন: DataTables.js কনফিগারেশন এবং ইনিশিয়ালাইজেশন করতে হবে।

উদাহরণ: ডেটা টেবিলস

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTable Example</title>
    <!-- DataTables CSS -->
    <link href="https://cdn.jsdelivr.net/npm/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-5">
        <table id="example" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>টেলিফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>+880123456789</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>জেন স্মিথ</td>
                    <td>jane@example.com</td>
                    <td>+880987654321</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>রামু মিয়া</td>
                    <td>ramu@example.com</td>
                    <td>+880556677889</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- DataTables JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable(); // Initialize DataTable
        });
    </script>

</body>
</html>

ডেটা টেবিলসের বৈশিষ্ট্য:

সার্চ: টেবিলের সব ডেটার মধ্যে সার্চ অপশন থাকে।
সোর্টিং: টেবিলের কলামগুলোকে সোর্ট করা যায় (এ Ascending বা Descending অর্ডারে)।
পেজিনেশন: ডেটা পেজের মাধ্যমে ভাগ করা যায়।
ফিল্টার: নির্দিষ্ট ডেটা ফিল্টার করতে পারেন।

DataTables.js এবং বুটস্ট্রাপ একসাথে ব্যবহার করলে আপনার ওয়েব পৃষ্ঠায় খুবই শক্তিশালী এবং রেসপন্সিভ টেবিল তৈরি করা সম্ভব।

সারাংশ:

বুটস্ট্রাপ ৫ এর টেবিলস এবং ডেটা টেবিলস দুটি গুরুত্বপূর্ণ ফিচার যা ডেটা উপস্থাপন এবং ইন্টারেক্টিভ ফিচার প্রদান করতে ব্যবহৃত হয়। আপনি সহজে টেবিল ডিজাইন কাস্টমাইজ করতে পারেন, এবং DataTables.js এর মাধ্যমে ডেটা টেবিলগুলিকে আরও ফাংশনাল এবং ইন্টারেক্টিভ বানাতে পারেন।

Content added By

Azizar Rahman Aziz

Responsive Table তৈরি করা

279

বুটস্ট্রাপ ৫-এ রেসপন্সিভ টেবিল তৈরি করা খুবই সহজ। যখন আপনার টেবিলটি মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত না হয়, তখন এটি রেসপন্সিভ টেবিলের মাধ্যমে স্ক্রিনের আকার অনুযায়ী অটো স্ক্রল হতে পারে বা টেবিলটি স্ক্রলযোগ্য হয়ে ওঠে। বুটস্ট্রাপ ৫ টেবিলের জন্য table-responsive ক্লাস প্রদান করে, যা টেবিলকে ছোট স্ক্রীনে সঠিকভাবে প্রদর্শিত হতে সহায়তা করে।

রেসপন্সিভ টেবিল তৈরি করার উপাদান

টেবিল কনটেইনার: রেসপন্সিভ টেবিলের জন্য একটি div কনটেইনার ব্যবহার করতে হয় যা table-responsive ক্লাস ধারণ করবে।
টেবিল কন্টেন্ট: table ক্লাস দিয়ে সাধারণ টেবিল তৈরি করতে হবে, যেমন: thead, tbody, tr, th, এবং td।
স্ক্রলযোগ্য টেবিল: ছোট স্ক্রীনে টেবিল স্ক্রল করার জন্য table-responsive ক্লাসটি কনটেইনারের সাথে যোগ করতে হয়।

উদাহরণ: রেসপন্সিভ টেবিল তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>রেসপন্সিভ টেবিল উদাহরণ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- রেসপন্সিভ টেবিল -->
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">নাম</th>
                    <th scope="col">বয়স</th>
                    <th scope="col">শহর</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>রাহুল</td>
                    <td>২৫</td>
                    <td>ঢাকা</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>সুমি</td>
                    <td>৩০</td>
                    <td>চট্টগ্রাম</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>মাহমুদ</td>
                    <td>৩৫</td>
                    <td>রাজশাহী</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

ব্যাখ্যা:

table-responsive ক্লাস:
- table-responsive ক্লাসটি div কনটেইনারে ব্যবহার করা হয়েছে, যা ছোট স্ক্রীনে টেবিলটি স্ক্রলযোগ্য করে তোলে। এটি সাধারণত মোবাইল ডিভাইসে টেবিলের কলামগুলোকে সঠিকভাবে প্রদর্শনের জন্য উপযুক্ত। যখন স্ক্রীন সাইজ ছোট হবে (যেমন মোবাইল ডিভাইস), তখন টেবিলটি সাইড-টু-সাইড স্ক্রল হবে।
table ক্লাস:
- বুটস্ট্রাপের table ক্লাসটি সাধারণ টেবিল স্টাইলিং প্রদান করে যেমন সীমানা, ব্যাকগ্রাউন্ড এবং টেক্সট এলাইনমেন্ট।

রেসপন্সিভ টেবিলের ব্যবহার

রেসপন্সিভ টেবিল ব্যবহারের ক্ষেত্রে কিছু অতিরিক্ত বিষয়গুলো খেয়াল রাখতে হয়:

এডভান্সড স্টাইলিং: আপনি table-striped, table-bordered, table-hover ইত্যাদি ক্লাস যোগ করে টেবিলের স্টাইল কাস্টমাইজ করতে পারেন।
- table-striped: রিজার্ভড রো শেডিং (ছোট/বিশাল লাইন বিভাজন)।
- table-bordered: টেবিলের চারপাশে সীমানা যোগ করে।
- table-hover: টেবিলের রোতে হোভার ইফেক্ট যোগ করে।

<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <!-- টেবিল কন্টেন্ট -->
    </table>
</div>

ফিক্সড হেডার: যদি আপনার টেবিলের হেডার বড় হয় এবং আপনি স্ক্রলিং এর সময় হেডারটি ফিক্সড রাখতে চান, তবে আপনি কিছু CSS কোড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

.table-responsive {
    max-height: 400px;
    overflow-y: auto;
}

এই কোডের মাধ্যমে আপনি টেবিলের শরীর স্ক্রলযোগ্য করতে পারেন, কিন্তু হেডারটি স্থির থাকবে।

সারাংশ

বুটস্ট্রাপ ৫ এ রেসপন্সিভ টেবিল তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয়ভাবে স্ক্রীন আকারের সাথে খাপ খাইয়ে যায়। table-responsive ক্লাসটি ছোট স্ক্রীনে টেবিলকে স্ক্রলযোগ্য করে তোলে, যা একটি সেরা ব্যবহারকারী অভিজ্ঞতা প্রদান করে। আপনি অতিরিক্ত কাস্টমাইজেশন যেমন টেবিলের স্টাইল, ফিক্সড হেডার, এবং আরও অনেক কিছু যোগ করতে পারেন।

Content added By

Azizar Rahman Aziz

Striped এবং Bordered Tables

385

বুটস্ট্রাপ ৫ এ Striped Tables এবং Bordered Tables দুটি সাধারণ টেবিল স্টাইল যা ব্যবহারকারীকে টেবিলের কন্টেন্টকে আরও পরিষ্কার এবং সুসংগঠিতভাবে প্রদর্শন করতে সাহায্য করে। এই স্টাইলগুলো টেবিলের বিভিন্ন রো বা কলামকে আলাদা করে এবং টেবিলের সীমান্তকে দৃশ্যমান করে।

Striped Tables

Striped Tables টেবিলের রো গুলিকে সাদা এবং রঙিন পরিবর্তন করে, যাতে টেবিলের তথ্য সহজে পড়া যায়। এটি বিশেষভাবে বড় টেবিল বা ডেটা ব্যবহারের ক্ষেত্রে উপকারী যেখানে ব্যবহারকারীকে তথ্য দ্রুত শনাক্ত করতে সাহায্য করে।

বুটস্ট্র্যাপ ৫ এ স্ট্রাইপড টেবিল তৈরি করতে table-striped ক্লাস ব্যবহার করতে হয়।

উদাহরণ: Striped Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Striped Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

table-striped: এই ক্লাসটি টেবিলের প্রতিটি রো-এর ব্যাকগ্রাউন্ড রঙকে স্ট্রাইপ হিসেবে পরিবর্তন করে।

Bordered Tables

Bordered Tables টেবিলের চারপাশে এবং সেলের মধ্যে সীমানা (বর্ডার) প্রদর্শন করে, যা টেবিলের ভিজ্যুয়াল উপস্থাপনকে আরো স্পষ্ট ও সুসংগঠিত করে তোলে। এটি বিশেষভাবে তখন উপকারী যখন অনেক কলাম বা তথ্য থাকে এবং ব্যবহারকারীকে দ্রুত তথ্য বিশ্লেষণ করতে সহায়তা করে।

বুটস্ট্র্যাপ ৫ এ বর্ডার টেবিল তৈরি করতে table-bordered ক্লাস ব্যবহার করা হয়।

উদাহরণ: Bordered Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bordered Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

table-bordered: এই ক্লাসটি টেবিলের প্রতিটি সেল এবং টেবিলের বাইরের সীমানাকে বর্ডার দিয়ে ঘেরাটোপে আবদ্ধ করে।

Striped এবং Bordered Tables একসাথে ব্যবহার করা

এছাড়া, আপনি চাইলে table-bordered এবং table-striped দুইটি ক্লাস একসাথে ব্যবহার করতে পারেন, যাতে টেবিলের প্রতিটি রো স্ট্রাইপড থাকে এবং টেবিলের প্রতিটি সেল বর্ডারযুক্ত থাকে।

উদাহরণ: Striped এবং Bordered Tables একসাথে

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Striped and Bordered Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

table-bordered এবং table-striped দুটি ক্লাস একসাথে ব্যবহার করা হয়েছে, যার ফলে টেবিলের সেলগুলো বর্ডারযুক্ত এবং রো গুলো স্ট্রাইপড হয়ে থাকবে।

সারাংশ

Striped Tables: টেবিলের রো গুলিকে স্ট্রাইপড রঙের মাধ্যমে আলাদা করা হয়, যা তথ্য দ্রুত পড়ার জন্য সহায়ক।
Bordered Tables: টেবিলের চারপাশে এবং সেলে বর্ডার প্রযোজ্য হয়, যা টেবিলের ভিজ্যুয়াল ক্লিয়ারনেস বাড়ায়।
দুইটি স্টাইল একসাথে ব্যবহার করলে একটি চমৎকার এবং সুসংগঠিত টেবিল তৈরি হয়।

Content added By

Azizar Rahman Aziz

Table Hover এবং Custom Table Styling

353

বুটস্ট্রাপ ৫ টেবিলের জন্য Hover এবং Custom Styling এর সুবিধা প্রদান করে, যা টেবিলের ভিজ্যুয়াল উপস্থাপনাকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। Hover এফেক্ট ব্যবহার করলে, ব্যবহারকারী যখন টেবিলের কোন রোতে মাউস পয়েন্টার রাখে, তখন ঐ রোটি হাইলাইট হয়ে যায়। আর Custom Styling এর মাধ্যমে টেবিলের কাস্টম ডিজাইন, রঙ, প্যাডিং ইত্যাদি পরিবর্তন করা যায়।

Table Hover

Table Hover ব্যবহার করে, আপনি টেবিলের রোতে মাউস হোভার করলে ঐ রোটি হাইলাইট করতে পারবেন। বুটস্ট্র্যাপ ৫ এ এটি তৈরি করতে table-hover ক্লাস ব্যবহার করা হয়।

উদাহরণ: Table Hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Hover Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে table-hover ক্লাসের মাধ্যমে টেবিলের রোতে মাউস হোভার করলে ঐ রোটি হাইলাইট হবে।

Custom Table Styling

বুটস্ট্র্যাপে আপনি টেবিলের বিভিন্ন অংশ কাস্টমাইজ করতে পারেন, যেমন টেবিলের ব্যাকগ্রাউন্ড, বর্ডার, রঙ, প্যাডিং ইত্যাদি। Custom Table Styling এর মাধ্যমে আপনি টেবিলের ডিজাইন নিজের মতো করে তৈরি করতে পারবেন।

উদাহরণ: Custom Table Styling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Table Styling Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Custom table styles */
        .table-custom {
            background-color: #f8f9fa;
            border: 2px solid #ccc;
        }

        .table-custom th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }

        .table-custom td, .table-custom th {
            padding: 15px;
        }

        .table-custom tbody tr:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>

    <div class="container mt-4">
        <table class="table table-custom">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

.table-custom: টেবিলের কাস্টম স্টাইল দেওয়া হয়েছে। এর মাধ্যমে টেবিলের ব্যাকগ্রাউন্ড, বর্ডার এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
th: টেবিল হেডারের জন্য আলাদা ব্যাকগ্রাউন্ড রঙ দেওয়া হয়েছে।
tbody tr:hover: টেবিলের রোতে হোভার করলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন হবে।

Summary

table-hover ক্লাস টেবিলের রোতে হোভার করলে হাইলাইট করতে সাহায্য করে।
table-bordered ক্লাস টেবিলের চারপাশে বর্ডার তৈরি করে।
কাস্টম টেবিল স্টাইলিং ব্যবহার করে টেবিলের ব্যাকগ্রাউন্ড, বর্ডার, প্যাডিং, হোভার ইফেক্ট ইত্যাদি কাস্টমাইজ করা যায়।

এই উপাদানগুলো ওয়েব ডিজাইনে ক্লিন এবং অ্যাট্রাকটিভ টেবিল তৈরি করতে সহায়ক।

Content added By

Azizar Rahman Aziz

DataTables Integration এবং Pagination

322

DataTables হল একটি শক্তিশালী jQuery প্লাগিন, যা টেবিল ডেটা প্রদর্শন এবং পরিচালনার জন্য ব্যবহৃত হয়। এটি স্বয়ংক্রিয়ভাবে বিভিন্ন ফিচার যেমন পেজিনেশন, সার্চ, সোর্টিং এবং ফিল্টারিং প্রদান করে। বুটস্ট্রাপ ৫ এর সাথে DataTables ব্যবহার করলে টেবিলের ডিজাইন আরও উন্নত হয় এবং ইউজার এক্সপেরিয়েন্সও বৃদ্ধি পায়।

এখানে আমরা দেখব কিভাবে DataTables প্লাগিনকে বুটস্ট্রাপ ৫-এ ইন্টিগ্রেট করে পেজিনেশন (pagination) এবং অন্যান্য ফিচার ব্যবহার করা যায়।

DataTables প্লাগিন ইন্টিগ্রেশন

DataTables ব্যবহারের জন্য প্রথমে আপনাকে DataTables এর CSS এবং JS ফাইল লোড করতে হবে। এরপর, একটি HTML টেবিল তৈরি করতে হবে, যেটি DataTables দ্বারা কনফিগার করা হবে।

স্টেপ ১: DataTables CSS এবং JS ফাইল লোড করা

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- DataTables CSS -->
<link href="https://cdn.jsdelivr.net/npm/datatables@1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.jsdelivr.net/npm/datatables@1.11.5/js/jquery.dataTables.min.js"></script>

<!-- Bootstrap JS (Optional for functionality like dropdown, modals etc.) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

স্টেপ ২: HTML টেবিল তৈরি করা

এখন একটি বেসিক HTML টেবিল তৈরি করি, যেটি আমরা DataTables প্লাগিনের সাথে ইন্টিগ্রেট করব।

<div class="container mt-5">
  <h2>DataTables Integration with Bootstrap 5</h2>
  <table id="myTable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>নাম</th>
        <th>ইমেইল</th>
        <th>ফোন</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>জন ডো</td>
        <td>john.doe@example.com</td>
        <td>+880123456789</td>
      </tr>
      <tr>
        <td>2</td>
        <td>আলিনা রহমান</td>
        <td>alina.rahman@example.com</td>
        <td>+880987654321</td>
      </tr>
      <tr>
        <td>3</td>
        <td>মোহাম্মদ হাসান</td>
        <td>mohammad.hassan@example.com</td>
        <td>+880112233445</td>
      </tr>
      <tr>
        <td>4</td>
        <td>রিমি আক্তার</td>
        <td>rimi.aktar@example.com</td>
        <td>+880998877665</td>
      </tr>
    </tbody>
  </table>
</div>

স্টেপ ৩: DataTables ইনিশিয়ালাইজ করা

এখন, JavaScript দিয়ে DataTables ইনিশিয়ালাইজ করতে হবে, যাতে টেবিলটি পেজিনেশন, সার্চ, এবং সোর্টিং ফিচার পায়।

<script>
  $(document).ready(function() {
    $('#myTable').DataTable();  // এই লাইনটি DataTables প্লাগিনের কাজ শুরু করবে
  });
</script>

এখন, আপনি যখন এই কোডটি চালাবেন, আপনার টেবিলটি স্বয়ংক্রিয়ভাবে পেজিনেশন, সার্চ এবং সোর্টিং ফিচার পাবে। DataTables প্লাগিন আপনাকে একটি সুন্দর এবং ইন্টারঅ্যাকটিভ টেবিল উপহার দিবে।

পেজিনেশন কাস্টমাইজেশন

DataTables স্বয়ংক্রিয়ভাবে পেজিনেশন তৈরি করে, তবে আপনি এর পেজ সাইজ এবং অন্যান্য কনফিগারেশন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি টেবিলের প্রতি পেজে কতগুলি রেকর্ড দেখাতে চান তা কনফিগার করতে পারেন।

উদাহরণ: পেজ সাইজ কাস্টমাইজ করা

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "pageLength": 5  // প্রতি পেজে ৫টি রেকর্ড দেখানো হবে
    });
  });
</script>

এছাড়া, lengthMenu অপশন ব্যবহার করে আপনি পেজ সাইজের জন্য বিভিন্ন অপশন প্রদান করতে পারেন।

উদাহরণ: বিভিন্ন পেজ সাইজ অপশন

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "lengthMenu": [5, 10, 15, 20],  // ইউজারকে ৫, ১০, ১৫, অথবা ২০ রেকর্ড পেজে দেখানোর অপশন দিবে
      "pageLength": 10  // ডিফল্টভাবে প্রতি পেজে ১০টি রেকর্ড দেখাবে
    });
  });
</script>

সার্চ ফিচার

DataTables প্লাগিনে একটি বিল্ট-ইন সার্চ বক্স থাকে যা টেবিলের কন্টেন্ট অনুসন্ধান করতে ব্যবহৃত হয়। এই ফিচারটি ব্যবহার করতে আলাদা কোনো কনফিগারেশন প্রয়োজন হয় না, কারণ এটি ডিফল্টভাবেই সক্রিয় থাকে। তবে আপনি যদি এটিকে কাস্টমাইজ করতে চান, তাহলে searching অপশনটি ব্যবহার করতে পারেন।

উদাহরণ: সার্চ ফিচার নিষ্ক্রিয় করা

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "searching": false  // সার্চ ফিচারটি বন্ধ করা
    });
  });
</script>

সারাংশ

DataTables প্লাগিন ব্যবহার করে টেবিলগুলির সাথে পেজিনেশন, সার্চ, সোর্টিং এবং ফিল্টারিং ফিচার সহজেই যোগ করা যায়।
বুটস্ট্রাপ ৫-এর স্টাইলিংয়ের সাথে DataTables ইন্টিগ্রেট করলে টেবিলের ডিজাইন আরও সুন্দর এবং ইউজার ফ্রেন্ডলি হয়ে ওঠে।
DataTables এর মাধ্যমে পেজ সাইজ কাস্টমাইজ, সার্চ ফিচার নিয়ন্ত্রণ এবং অন্যান্য উন্নত কনফিগারেশন সহজে করা সম্ভব।

এইভাবে আপনি আপনার টেবিলকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি করতে পারেন।

Content added By

Azizar Rahman Aziz

Bootstrap 5 এর পরিচিতি Bootstrap 5 সেটআপ এবং ইনস্টলেশন Bootstrap 5 এর Grid System Bootstrap 5 এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Bootstrap 5 এর কালার থিম এবং কাস্টমাইজেশন

Bootstrap 5 এর টেবিলস এবং ডেটা টেবিলস

বুটস্ট্রাপ টেবিলস (Bootstrap Tables)

টেবিলের প্রধান ক্লাসসমূহ:

উদাহরণ: বুটস্ট্রাপ টেবিল

ডেটা টেবিলস (Data Tables)

DataTables.js ব্যবহার করার উদাহরণ

উদাহরণ: ডেটা টেবিলস

ডেটা টেবিলসের বৈশিষ্ট্য:

সারাংশ:

Responsive Table তৈরি করা

রেসপন্সিভ টেবিল তৈরি করার উপাদান

উদাহরণ: রেসপন্সিভ টেবিল তৈরি করা

ব্যাখ্যা:

রেসপন্সিভ টেবিলের ব্যবহার

সারাংশ

Striped এবং Bordered Tables

Striped Tables

উদাহরণ: Striped Table

Bordered Tables

উদাহরণ: Bordered Table

Striped এবং Bordered Tables একসাথে ব্যবহার করা

উদাহরণ: Striped এবং Bordered Tables একসাথে

সারাংশ

Table Hover এবং Custom Table Styling

Table Hover

উদাহরণ: Table Hover

Custom Table Styling

উদাহরণ: Custom Table Styling

Summary

DataTables Integration এবং Pagination

DataTables প্লাগিন ইন্টিগ্রেশন

স্টেপ ১: DataTables CSS এবং JS ফাইল লোড করা

স্টেপ ২: HTML টেবিল তৈরি করা

স্টেপ ৩: DataTables ইনিশিয়ালাইজ করা

পেজিনেশন কাস্টমাইজেশন

উদাহরণ: পেজ সাইজ কাস্টমাইজ করা

উদাহরণ: বিভিন্ন পেজ সাইজ অপশন

সার্চ ফিচার

উদাহরণ: সার্চ ফিচার নিষ্ক্রিয় করা

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!