Grid কম্পোনেন্টের ব্যবহার

Vaadin এর Grid কম্পোনেন্ট একটি শক্তিশালী এবং ইউজার-বান্ধব উপাদান যা ব্যবহারকারীদের বড় ডেটাসেট প্রদর্শন করতে সাহায্য করে। এটি সহজেই ফিল্টার, সোর্ট, পেজিনেশন, সিলেকশন এবং অন্যান্য ইন্টারঅ্যাকটিভ ফিচার সহ গ্রিড ভিউ তৈরি করতে পারে। এই কম্পোনেন্টটি মূলত টেবিল আকারে ডেটা প্রদর্শন করতে ব্যবহৃত হয় এবং ওয়েব অ্যাপ্লিকেশনগুলিতে ব্যাপকভাবে ব্যবহৃত হয়ে থাকে।

Grid কম্পোনেন্ট কী?

Grid একটি টেবিল ভিত্তিক UI কম্পোনেন্ট যা ব্যবহারকারীদের ডেটা দেখানোর জন্য বিভিন্ন কলাম এবং রো ব্যবহার করে। এটি একাধিক কাস্টমাইজেশন অপশন প্রদান করে যেমন সোর্টিং, ফিল্টারিং, পেজিনেশন, রেডি ডেটা রেন্ডারিং, সিলেকশন, এবং আরও অনেক কিছু। এর মাধ্যমে আপনি ডেটাসেটের আকার এবং কাঠামো অনুযায়ী ডেটাকে খুবই সুনির্দিষ্টভাবে উপস্থাপন করতে পারেন।

Grid এর মূল বৈশিষ্ট্য

1. ডেটা সোর্টিং (Data Sorting):
   • আপনি Grid-এর কলামগুলিতে সোর্টিং সক্ষম করতে পারেন, যাতে ব্যবহারকারী ডেটা সহজেই যেকোনো কলাম অনুযায়ী অ্যালফাবেটিক্যাল বা সংখ্যাগতভাবে সাজাতে পারেন।
2. ফিল্টারিং (Filtering):
   • Grid কম্পোনেন্টে ফিল্টারিং ফিচারও রয়েছে, যা ব্যবহারকারীদের নির্দিষ্ট ডেটা খুঁজে বের করতে সাহায্য করে। উদাহরণস্বরূপ, ব্যবহারকারী একটি নির্দিষ্ট নাম বা ডেটা খুঁজতে পারেন।
3. পেজিনেশন (Pagination):
   • বড় ডেটাসেট নিয়ে কাজ করার সময় Grid পেজিনেশন সাপোর্ট করে, যার মাধ্যমে ডেটাকে ছোট অংশে ভাগ করে দেখানো হয়।
4. ডেটা সিলেকশন (Data Selection):
   • Grid ব্যবহারকারীদের ডেটা সিলেক্ট করতে দেয়, যা বিভিন্ন ধরনের প্রয়োজনে ব্যবহার করা যেতে পারে, যেমন ব্যাচ অপারেশন।
5. কাস্টম রেন্ডারিং (Custom Rendering):
   • আপনি Grid-এর ডেটাকে কাস্টম স্টাইল বা কাস্টম রেন্ডারিং প্রয়োগ করে দেখতে পারেন।

Vaadin Grid কম্পোনেন্টের উদাহরণ

Vaadin-এ একটি সিম্পল Grid কম্পোনেন্ট তৈরি করতে নিচের কোডটি ব্যবহার করা যেতে পারে:

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        // ডেটা তৈরি করা
        List<Person> people = List.of(
            new Person("John Doe", 28),
            new Person("Jane Smith", 34),
            new Person("Mike Johnson", 45)
        );

        // Grid তৈরি করা
        Grid<Person> grid = new Grid<>(Person.class);
        grid.setItems(people); // Grid এ ডেটা সেট করা

        // Grid কলাম কাস্টমাইজ করা
        grid.setColumns("name", "age"); // কলামগুলো নির্ধারণ

        // গ্রিডকে UI তে যোগ করা
        add(grid);
    }

    // ব্যক্তির তথ্য রাখা Person ক্লাস
    public static class Person {
        private String name;
        private int age;

        public Person(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public int getAge() {
            return age;
        }
    }
}

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

Vaadin Grid কম্পোনেন্টে বিভিন্ন কাস্টমাইজেশন ফিচার যোগ করা সম্ভব। নিচে কিছু সাধারণ কাস্টমাইজেশন ফিচারের উদাহরণ দেওয়া হলো:

1. কলাম অর্ডার এবং লেবেল কাস্টমাইজেশন

আপনি Grid-এ কলামের লেবেল পরিবর্তন করতে এবং কলামগুলির অর্ডার নিয়ন্ত্রণ করতে পারেন:

grid.addColumn(Person::getName).setHeader("Full Name").setSortable(true);
grid.addColumn(Person::getAge).setHeader("Age").setSortable(true);

এখানে, setHeader() মেথডটি কলামের শিরোনাম কাস্টমাইজ করে এবং setSortable(true) মেথডটি কলামগুলোকে সোর্টেবল বানায়।

2. ফিল্টারিং ফিচার

আপনি Grid-এর জন্য ফিল্টারিং যোগ করতে পারেন, যার মাধ্যমে ব্যবহারকারী নির্দিষ্ট ডেটা অনুসন্ধান করতে পারবেন:

TextField filterText = new TextField();
filterText.setPlaceholder("Filter by name...");
filterText.addValueChangeListener(event -> {
    grid.setItems(people.stream()
        .filter(person -> person.getName().toLowerCase().contains(event.getValue().toLowerCase()))
        .collect(Collectors.toList()));
});
add(filterText, grid);

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

3. পেজিনেশন

Vaadin Grid কম্পোনেন্ট পেজিনেশন সাপোর্ট করে, যা বড় ডেটাসেটের জন্য খুবই উপকারী। নিচে একটি উদাহরণ:

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(people);
grid.setPageSize(5); // প্রতি পেজে ৫টি আইটেম

এখানে, setPageSize() মেথডটি প্রতি পেজে কতটি আইটেম দেখানো হবে তা নির্ধারণ করে।

4. ডেটা সিলেকশন

Grid-এ ব্যবহারকারীরা এক বা একাধিক আইটেম নির্বাচন করতে পারেন:

grid.setSelectionMode(SelectionMode.MULTI); // একাধিক আইটেম নির্বাচন করা যাবে
grid.addSelectionListener(event -> {
    Set<Person> selectedPeople = event.getAllSelectedItems();
    // নির্বাচিত আইটেমের ওপর অপারেশন করুন
});

এখানে, setSelectionMode(SelectionMode.MULTI) ব্যবহার করে একাধিক আইটেম সিলেক্ট করা যাবে এবং addSelectionListener দিয়ে সিলেক্টেড আইটেমের ওপর কাজ করা যাবে।

সারাংশ

Vaadin Grid একটি শক্তিশালী কম্পোনেন্ট যা আপনাকে বড় ডেটাসেট সহজে প্রদর্শন এবং পরিচালনা করতে সহায়তা করে। এর মাধ্যমে আপনি ডেটা সোর্টিং, ফিল্টারিং, পেজিনেশন, সিলেকশন এবং কাস্টম রেন্ডারিংয়ের মতো ফিচারগুলো খুব সহজে প্রয়োগ করতে পারেন। এটি ওয়েব অ্যাপ্লিকেশনগুলিতে ডেটা ভিউ করার জন্য একেবারে আদর্শ একটি টুল।