Reply To: Data Table Pagination Logic

[Markov]

Hi,

You can try this:

import React, { useRef, useEffect } from "react";
import { Grid } from "smart-webcomponents-react/grid";
import "smart-webcomponents-react/source/styles/smart.default.css";

function App() {
  const gridRef = useRef(null);

  useEffect(() => {
    const dataAdapter = new window.Smart.DataAdapter({
      virtualDataSourceLength: 1000, // Total number of records (can be updated dynamically)
      virtualDataSource: function (resultCallbackFunction, details) {
        const { pageIndex, pageSize, sortColumns } = details;
        const sort = sortColumns.map(sc => <code>${sc.dataField},${sc.sortOrder}</code>).join(';');

        fetch(<code>/users?page=${pageIndex}&size=${pageSize}&sort=${sort}</code>)
          .then(response => response.json())
          .then(data => {
            resultCallbackFunction({
              dataSource: data.content,
              virtualDataSourceLength: data.totalElements
            });
          });
      },
      dataFields: [
        'id: number',
        'name: string',
        'age: number'
      ]
    });

    gridRef.current.dataSource = dataAdapter;
  }, []);

  return (
    <Grid
      ref={gridRef}
      paging={{ enabled: true, pageSize: 10 }}
      sorting={{ enabled: true }}
      columns={[
        { label: 'ID', dataField: 'id', width: 50 },
        { label: 'Name', dataField: 'name' },
        { label: 'Age', dataField: 'age', width: 80 }
      ]}
    />
  );
}

User.java

import jakarta.persistence.*;

@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;
private int age;

public User() {}

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

// Getters and Setters
public Long getId() { return id; }
public String getName() { return name; }
public int getAge() { return age; }

public void setId(Long id) { this.id = id; }
public void setName(String name) { this.name = name; }
public void setAge(int age) { this.age = age; }
}`

UserRepository.java

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {}

UserController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.*;
import org.springframework.web.bind.annotation.*;

import java.util.*;

@RestController
@RequestMapping("/users")
@CrossOrigin(origins = "*")
public class UserController {

    @Autowired
    private UserRepository repo;

    @GetMapping
    public Map<String, Object> getUsers(
            @RequestParam int page,
            @RequestParam int size,
            @RequestParam(required = false, defaultValue = "id,asc") String sort
    ) {
        String[] parts = sort.split(",");
        Sort.Direction direction = Sort.Direction.fromString(parts[1]);
        String field = parts[0];

        Pageable pageable = PageRequest.of(page, size, Sort.by(direction, field));
        Page<User> result = repo.findAll(pageable);

        Map<String, Object> response = new HashMap<>();
        response.put("content", result.getContent());
        response.put("totalElements", result.getTotalElements());

        return response;
    }
}

DataSeeder.java

import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;
import org.springframework.beans.factory.annotation.Autowired;

@Component
public class DataSeeder implements CommandLineRunner {
    @Autowired
    private UserRepository repo;

    @Override
    public void run(String... args) {
        if (repo.count() == 0) {
            for (int i = 1; i <= 100; i++) {
                repo.save(new User("User " + i, 20 + (i % 10)));
            }
        }
    }
}

DemoApplication.java

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/