AG Grid Community

<!-- AG Grid Community — jsDelivr CDN, 무료 오픈소스 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@33/styles/ag-grid.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@33/styles/ag-theme-quartz.min.css">
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@33/dist/ag-grid-community.min.js"></script>

// 컬럼 정의
const colDefs = [
    { field: 'id',         headerName: '#',    width: 70 },
    { field: 'title',      headerName: '제목', flex: 2, filter: true },
    { field: 'author',     headerName: '작성자', width: 120 },
    { field: 'views',      headerName: '조회수', width: 100,
      cellRenderer: p => `<span class="badge">${p.value}</span>` },
    { field: 'created_at', headerName: '작성일', width: 150 },
];

// 그리드 생성
const gridApi = agGrid.createGrid(document.getElementById('my-grid'), {
    columnDefs: colDefs,
    defaultColDef: { sortable: true, resizable: true },
    pagination: true,
    paginationPageSize: 10,
    rowData: [],  // 초기 빈 데이터
});

// CI4 API에서 데이터 로드
fetch('/examples/aggrid/data')
    .then(r => r.json())
    .then(rows => gridApi.setGridOption('rowData', rows));

public function data(): Response
{
    $rows = db_connect()
        ->table('posts')
        ->select('id, title, author, views, created_at')
        ->where('deleted_at', null)
        ->orderBy('id', 'ASC')
        ->get()
        ->getResultArray();

    return $this->response->setJSON($rows);
}

let serverSearch = '';

const gridApi = agGrid.createGrid(document.getElementById('server-grid'), {
    columnDefs: colDefs,
    rowModelType: 'infinite',    // 서버 사이드 무한 스크롤
    cacheBlockSize: 20,          // 한 번에 요청할 행 수
    maxBlocksInCache: 5,
    datasource: {
        getRows(params) {
            const url = new URL('/examples/aggrid/server-data', location.origin);
            url.searchParams.set('startRow', params.startRow);
            url.searchParams.set('endRow',   params.endRow);
            url.searchParams.set('search',   serverSearch);

            if (params.sortModel.length) {
                url.searchParams.set('sortField', params.sortModel[0].colId);
                url.searchParams.set('sortDir',   params.sortModel[0].sort);
            }

            fetch(url)
                .then(r => r.json())
                .then(data => {
                    params.successCallback(data.rows, data.total);
                })
                .catch(() => params.failCallback());
        },
    },
});

public function serverData(): Response
{
    $startRow  = (int) $this->request->getGet('startRow');
    $endRow    = (int) $this->request->getGet('endRow');
    $sortField = $this->request->getGet('sortField') ?? 'id';
    $sortDir   = $this->request->getGet('sortDir')   ?? 'asc';
    $search    = trim($this->request->getGet('search') ?? '');

    $builder = db_connect()->table('posts')
        ->where('deleted_at', null);

    if ($search) {
        $builder->groupStart()
            ->like('title', $search)
            ->orLike('author', $search)
            ->groupEnd();
    }

    $total = $builder->countAllResults(false);  // 전체 수 (페이지 적용 전)

    $rows = $builder
        ->orderBy($sortField, $sortDir)
        ->limit($endRow - $startRow, $startRow)
        ->get()->getResultArray();

    return $this->response->setJSON([
        'rows'  => $rows,
        'total' => $total,
    ]);
}