gp-grid: უფასო, ღია კოდის TypeScript მონაცემთა ცხრილი React, Vue და Angular-ისთვის (ფუნქციები პაიწოლის გარეშე)

ღია კოდის მონაცემთა ცხრილი 1000 სტრიქონით შთამბეჭდავად გამოიყურება, მაგრამ მაშინაც კი, როცა თქვენს აპლიკაციას 100 000 ან მეტი სტრიქონის დამუშავება სჭირდება, შეიძლება გაჭირდეს. ფუნქციებთან დაკავშირებითაც იგივეა: უფასო ბიბლიოთეკაში დალაგებასა და ფილტრაციას იპოვით, მაგრამ შემდეგ აღმოაჩენთ, რომ სტრიქონების დაჯგუფება, პივოტ ცხრილები ან სხვა მოწინავე შესაძლებლობები საწარმოს ლიცენზიას მოითხოვს.

gp-grid სხვა მიდგომას ირჩევს. ეს არის ღია კოდის TypeScript მონაცემთა ცხრილი React, Vue და Angular-ისთვის, გავრცელებული Apache 2.0 ლიცენზიით. მას არ აქვს გარე დამოკიდებულებები, ის დიდ მონაცემთა ნაკრებებს ვირტუალური სქროლინგით უჭერს მხარს და ყველა თავის ფუნქციას პაიწოლის გარეშე გთავაზობთ.

ამ სტატიაში განვიხილავ, რა ხდის მონაცემთა ცხრილს სასარგებლოდ, როგორ მუშაობს gp-grid, როგორ დავიწყოთ მისი გამოყენება თქვენს ჩარჩოში და როგორ შედარდება იგი AG Grid-თან ფუნქციების, ბანდლის ზომისა და გამოქვეყნებული წარმადობის ტესტების მიხედვით.

TL;DR

gp-grid არის უფასო, ღია კოდის TypeScript მონაცემთა ცხრილი React, Vue და Angular-ისთვის, ლიცენზირებული Apache 2.0-ით. ის აერთიანებს ვირტუალურ სქროლინგს, მოწინავე მონაცემთა დამუშავებასა და ცხრილის სტილის ურთიერთქმედებებს, ფუნქციებს კი არ ჩაკეტავს ფასიან საწარმოს დონეზე.

მისი ძირითადი შესაძლებლობები:

✅ სტრიქონებისა და სვეტების ვირტუალიზაცია: რენდერდება მხოლოდ ხილული სტრიქონები და სვეტები, პლუს overscan ბუფერი, რათა დიდი და ფართო ცხრილები რეაგირებადი დარჩეს.
✅ დალაგება და ფილტრაცია: მხარს უჭერს მრავალსვეტიან დალაგებას და მოწინავე ფილტრის პირობებს.
✅ უჯრედების შერჩევა და redაქტირება: მუშაობს შერჩეულ დიაპაზონებთან, კლავიატურით navigაციასთან, inline რედაქტირებასთან და fill handle-თან.
✅ მორგებადი რენდერინგი და სტილი: შესაძლებელია უჯრედების, სათაურების, ფილტრების, თემებისა და dark mode-ის მორგება.
✅ ცოცხალი და სერვერული მონაცემები: მართავს სტრიმინგ განახლებებს ან სტრიქონებს მოთხოვნისამებრ ითხოვს დიდი მონაცემთა ნაკრებებისთვის.
✅ მოქნილი განლაგება და ანალიტიკა: სვეტების გადალაგება, ზომის შეცვლა, დამაგრება და გაყინვა, სტრიქონების დაჯგუფება, აგრეგაცია და პივოტ ცხრილები.
✅ AI კოდირების აგენტების მხარდაჭერა: ოფიციალური gp-grid skill ეხმარება კოდირების აგენტებს სწორი API-ების, ჩარჩოს bindings-ისა და მონაცემთა წყაროს პატერნების ინტეგრაციაში.

gp-grid 1.0.0 მხარს უჭერს როგორც სტრიქონების, ისე სვეტების ვირტუალიზაციას და overscan-ის გამოყენებით ეფექტურად არენდერებს ხილულ არეს. მისი გამოქვეყნებული ერთმილიონიანი სტრიქონის ტესტი აღწერს საშუალოდ 56.2 FPS-ს გაზომილი სქროლინგის დროს, თუმცა შედეგები დამოკიდებულია სამუშაო დატვირთვასა და ტესტის გარემოზე.

რა არის ვებ მონაცემთა ცხრილი?

ვებ მონაცემთა ცხრილი არის ინტერაქტიული კომპონენტი, რომელიც ბრაუზერში ცხრილური მონაცემების საჩვენებლად, დასალაგებლად, გასაფილტრად, შესარჩევად და რედაქტირებისთვის გამოიყენება. ჩვეულებრივი HTML <table>-საგან განსხვავებით, მონაცემთა ცხრილი შეიძლება უზრუნველყოფდეს ცხრილის სტილის ურთიერთქმედებებს, მორგებად უჯრედებსა და ვირტუალურ სქროლინგს, რომელიც მხოლოდ მიმდინარე ხედვის არეში საჭირო სტრიქონებს არენდერებს.

ეს განსხვავება მნიშვნელოვანია, როცა ადმინისტრაციულ პანელს, CRM-ს, ანალიტიკურ პლატფორმას, ფინანსურ აპლიკაციას ან ნებისმიერ ინტერფეისს ქმნით, სადაც ხალხი დიდ მონაცემთა ნაკრებებთან მუშაობს.

სტანდარტული HTML <table> გაძლევთ სტრიქონებისა და სვეტების საჩვენებლად საჭირო ძირითად სტრუქტურას. შეგიძლიათ საჭირო ქცევა დაამატოთ, მაგრამ დალაგება, ფილტრაცია და კლავიატურით navigაცია საკუთარი ხელით მოგიწევთ აწყობა.

headless ცხრილის ბიბლიოთეკა, როგორიცაა TanStack Table, ცხრილის ლოგიკის დიდ ნაწილს ფარავს და მარკაპისა და წარმოჩენის არჩევანს თქვენზე ტოვებს. ეს დიდ მოქნილობას იძლევა, თუმცა ინტერფეისის აწყობა გუნდის პასუხისმგებლობაა.

სრული მონაცემთა ცხრილის კომპონენტი უფრო სრულ UI-ს მოიცავს, მათ შორის ჩაშენებულ ურთიერთქმედებებსა და კონფიგურირებად ქცევას. გუნდებისთვის, რომლებსაც სპრედშიტის მსგავსი გამოცდილება სჭირდებათ ყველა ურთიერთქმედების ნულიდან დაწერის გარეშე, ეს მნიშვნელოვან დროს დაზოგავს.

გამოწვევა იმაში მდგომარეობს, რომ იპოვოთ ცხრილი, რომელიც თქვენს მონაცემთა ნაკრებს უძლებს, შეესაბამება თქვენს ჩარჩოს და შეიცავს აპლიკაციისთვის საჭირო ფუნქციებს, უაზრო ბანდლის სიმძიმისა და ლიცენზიის ხარჯების გარეშე.

რომელი ფუნქციებია მნიშვნელოვანი ვებ მონაცემთა ცხრილში?

ღია კოდის მონაცემთა ცხრილის არჩევისას დაიწყეთ პრაქტიკული ჩამონათვალით: წარმადობა, მონაცემებზე ოპერაციები, რედაქტირება, მორგება, ჩარჩოს თავსებადობა, ხელმისაწვდომობა და ლიცენზირება. სწორი ბალანსი დამოკიდებულია თქვენი აპლიკაციის სამუშაო დატვირთვასა და მომხმარებლების მოლოდინზე.

ბიბლიოთეკის არჩევამდე ღირს შემდეგი შესაძლებლობების შეფასება:

• ვირტუალური სქროლინგი: დიდ მონაცემთა ნაკრებებს რეაგირებადს ხდის, რადგან DOM-ში ყველა სტრიქონის ნაცვლად მხოლოდ ხილულ სტრიქონებსა და მცირე ბუფერს არენდერებს.
• დალაგება და ფილტრაცია: მხარს უჭერს ყოველდღიურ მონაცემთა გამოკვლევას, მათ შორის მრავალსვეტიან დალაგებას, მოწინავე ფილტრის პირობებსა და სერვერულ ოპერაციებს.
• შერჩევა და რედაქტირება: უზრუნველყოფს უჯრედებისა და დიაპაზონების შერჩევას, კლავიატურით navigაციას, inline რედაქტირებასა და სპრედშიტის მსგავს მოხერხებულობებს, მაგალითად fill handle-ს.
• მორგება და თემები: გაძლევთ საშუალებას შექმნათ მორგებადი cell renderer-ები, დააფორმატოთ მნიშვნელობები, გამოიყენოთ აპლიკაციისთვის სპეციფიკური სტილი და მხარი დაუჭიროთ dark mode-ს.
• TypeScript და ჩარჩოს მხარდაჭერა: გთავაზობთ საიმედო ტიპებსა და bindings-ებს, რომლებიც თქვენს არსებულ React, Vue ან Angular აპლიკაციას ერგება.
• ბანდლის ზომა და დამოკიდებულებები: გავლენას ახდენს საწყისი ჩატვირთვის ხარჯებზე და იმ მესამე მხარის პაკეტების რაოდენობაზე, რომელთა მართვაც თქვენს პროექტს მოუწევს.
• ხელმისაწვდომობა და კლავიატურის მხარდაჭერა: საერთო ცხრილის ურთიერთქმედებებს კლავიატურით ხელმისაწვდომს ხდის და შესაბამის accessibility სემანტიკას უზრუნველყოფს.
• ლიცენზირება: ამოწმებს, შედის თუ არა დაჯგუფება, პივოტ ცხრილები და სხვა მოწინავე ფუნქციები უფასო ლიცენზიაში.

ბოლო პუნქტს განსაკუთრებული ყურადღება სჭირდება. ბიბლიოთეკა შეიძლება დაყენებისთვის უფასო იყოს, მაგრამ იმ შესაძლებლობებისთვის ფასი მოითხოვოს, რომლებიც თქვენს აპლიკაციას საბოლოოდ დასჭირდება. გადაწყვეტილების მიღებამდე შეამოწმეთ ცალკეული ფუნქციების ლიცენზია.

gp-grid ამ ჩამონათვალს TypeScript-first არქიტექტურით, ვირტუალური სქროლინგით, სპრედშიტის მსგავსი ურთიერთქმედებებითა და Apache 2.0 ლიცენზიით პასუხობს, რომელიც მთლიან ფუნქციონალს მოიცავს.

რა არის gp-grid?

gp-grid არის ღია კოდის TypeScript მონაცემთა ცხრილი React, Vue და Angular-ისთვის, აგებული ვირტუალურ სქროლინგზე, ჩარჩოსგან დამოუკიდებელ ბირთვსა და მონაცემთა წყაროს აბსტრაქციაზე. ბიბლიოთეკა Apache 2.0-ით არის გავრცელებული, ხოლო მისი 1.0.0 გამოშვება ყველა ფუნქციას უფასოდ აცხადებს.

• სლოტებზე დაფუძნებული ვირტუალური სქროლინგი: gp-grid სქროლვისას DOM-კონტეინერების პულს გადაამუშავებს, რაც არენდერებული ელემენტების რაოდენობას კონტროლირებადს ხდის, მაშინაც კი, როცა მონაცემთა ნაკრები მილიონობით სტრიქონს შეიცავს.
• ინსტრუქციებზე დაფუძნებული ბირთვი: ბირთვი UI-ს ცვლილებებს დეკლარაციული ინსტრუქციების სახით აგენერირებს, რაც ცხრილის ლოგიკას ჩარჩოსპეციფიკური რენდერინგისგან გამოყოფს და wrapper-ებს ერთი და იგივე ქცევის გაზიარების საშუალებას აძლევს.
• მოქნილი მონაცემთა წყაროები: შეგიძლიათ იმუშაოთ ბრაუზერის მეხსიერებაში არსებულ მონაცემებთან ან სტრიქონები სერვერიდან მოთხოვნისამებრ მოიტანოთ, აპლიკაციის საჭიროებიდან გამომდინარე.

პროექტი ფუნქციონალს ოთხ პაკეტად ყოფს: @gp-grid/core, @gp-grid/react, @gp-grid/vue და @gp-grid/angular. ისინი npm-სა და JSR-ზეა ხელმისაწვდომი.

ინსტალაცია და სწრაფი დაწყება: React, Vue და Angular

gp-grid-ის დაწყებას სჭირდება თქვენი ჩარჩოს პაკეტის დაყენება, სვეტების აღწერა და მონაცემების მიწოდება. ბიბლიოთეკა TypeScript 5.0-ს ან უფრო ახალ ვერსიას გირჩევთ, საკუთარ ტიპის განმარტებებს შეიცავს და React 18+-სა და Vue 3-ს დedicated wrapper-ების მეშვეობით უჭერს მხარს.

პაკეტის დაყენება

აირჩიეთ საჭირო ჩარჩოს პაკეტი და დააყენეთ თქვენი სასურველი პაკეტების მენეჯერით:

npm install @gp-grid/<framework>
# Replace <framework> with react, vue, or angular

პაკეტების სახელები და კომპონენტების bindings-ები ქვემოთ არის შეჯამებული.

პირველი React მონაცემთა ცხრილის აწყობა

განსაზღვრეთ სვეტები და გადასცით ისინი Grid კომპონენტს სტრიქონებთან ერთად. ეს მაგალითი რედაქტირებად სახელის სვეტსა და მარტივ ელფოსტის სვეტს მოიცავს.

import { Grid, type ColumnDefinition } from "@gp-grid/react";
import "@gp-grid/react/dist/styles.css";

const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, headerName: "ID" },
  { field: "name", cellDataType: "text", width: 150, editable: true },
  { field: "email", cellDataType: "text", width: 250, headerName: "Email" },
];

const data = [
  { id: 1, name: "Alice", email: "[email protected]" },
  { id: 2, name: "Bob", email: "[email protected]" },
];

export default function App() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Grid columns={columns} rowData={data} rowHeight={36} />
    </div>
  );
}

ერთი დეტალი შეიძლება ბევრი გატანჯული დებაგირების საათი დაგიზოგოთ: ცხრილი მთლიანად ავსებს თავის მშობელ ელემენტს, ამიტომ მშობელს აშკარად მიცემული სიმაღლე სჭირდება.

სტილების ფაილი ერთხელ შემოიტანეთ აპლიკაციის ძირეულ კომპონენტში. Vue და Angular საკუთარ კომპონენტის bindings-ებს იყენებენ, თუმცა იგივე სვეტების აღწერის მოდელს მისდევენ.

gp-grid-ის ძირითადი ფუნქციები

gp-grid-ის ძირითადი ფუნქციები მოიცავს წარმადობას, მონაცემთა გამოკვლევას, სპრედშიტის მსგავს რედაქტირებას, მორგებას და მონაცემთა ჩატვირთვის სხვადასხვა გზას. აქ არის შესაძლებლობები, რომლებიც ღირს განხილვას, როცა გადაწყვეტთ, ემთხვევა თუ არა ბიბლიოთეკა თქვენს აპლიკაციას.

სლოტებზე დაფუძნებული ვირტუალური სქროლინგი და მილიონიანი სტრიქონების წარმადობა

gp-grid სლოტებზე დაფუძნებულ ვირტუალიზაციას იყენებს, რათა მონაცემთა ზრდასთან ერთად არენდერებული DOM მცირე დარჩეს. 1.0.0 ვერსიიდან იგი მთლიან ცხრილის არეს ვირტუალიზებს, სტრიქონებისა და სვეტების ჩათვლით. ის მუდმივად გამოყენებად DOM-კონტეინერებს ინახავს და მათ მინიჭებას მომხმარებლის ვერტიკალური ან ჰორიზონტალური სქროლვისას აახლებს, არენდერებს მხოლოდ ხილულ არესა და მის გარშემო მდებარე overscan ბუფერს.

იგივე overscan ლოგიკა ორივე განზომილებაზე მოქმედებს, რაც ორივე მიმართულებით გლუვი სქროლინგის შენარჩუნებაში ეხმარება. ეს ნიშნავს, რომ gp-grid დიდ მონაცემთა ნაკრებებსა და ფართო ცხრილებს ყველა სტრიქონისა და სვეტის DOM-ში ჩასმის გარეშე უძლებს. არენდერების სლოტების ხელახლა გამოყენებით ის ამცირებს DOM-ელემენტების მუდმივად შექმნისა და წაშლის ხარჯებს.

დიდი კლიენტის მხარის მონაცემთა ნაკრებებისთვის დალაგება შეიძლება Web Worker-ში გაეშვას, რაც კლიენტის მონაცემთა წყაროში ნაგულისხმევად ჩართულია. დეველოპერებს შეუძლიათ overscan, wheelDampening და maxFlingVelocity მორგონ, რათა სქროლინგის ქცევა თავიანთ ინტერფეისსა და შეყვანის მოწყობილობებს მოერგოს.

gp-grid-ის ბენჩმარკების მიხედვით, ერთმილიონიანმა ტესტმა აჩვენა:

• 56.2 საშუალო FPS სქროლვისას, ჩამოგდებული კადრების გარეშე.
• 652 ms ზრდადი დალაგებისთვის და 188 ms ტექსტური ფილტრისთვის.
• დაახლოებით 254.7 MB მეხსიერება მონაცემთა ჩატვირთვის შემდეგ.

ეს შედეგები პერსპექტიულია, მაგრამ ისინი უნივერსალური წარმადობის გარანტიები არ არის. ბენჩმარკმა გამოსცადა @gp-grid/react 0.19.0, ამიტომ ეს ვერსია გაითვალისწინეთ, როცა ციფრებს პროექტის ახალ 1.0 გამოშვებას ადარებთ.

https://www.youtube.com/embed/tIcdciyyLe0

მრავალსვეტიანი დალაგება და მოწინავე ფილტრაცია

დალაგება და ფილტრაცია მომხმარებელს ეხმარება, იპოვოს სასარგებლო ინფორმაცია ათასობით ჩანაწერის ხელით გადათვალიერების გარეშე. gp-grid დალაგებას ნაგულისხმევად ჩართავს: სვეტის სათაურზე დაწკაპუნება მის დალაგების რიგს ცვლის, ხოლო Shift-ის დაჭერა და სხვა სათაურზე დაწკაპუნება მეორად დალაგების კრიტერიუმს ამატებს.

ფილტრის მართვის საშუალებები მხარს უჭერს ტექსტურ, რიცხვით და თარიღის ოპერატორებს, ასევე ჩეკბოქსზე დაფუძნებულ რეჟიმს განსხვავებული მნიშვნელობების შესარჩევად. უფრო რთული ძიებისთვის მომხმარებლებს შეუძლიათ პირობების AND/OR ლოგიკით გაერთიანება, რაც გამოსახულებებს, როგორიცაა (A AND B) OR C, შესაძლებელს ხდის.

დალაგება შეგიძლიათ გლობალურად გამორთოთ sortingEnabled-ით ან ცალკეულ სვეტზე დააყენოთ sortable: false. მორგებული comparator-ები და მორგებული ფილტრის კომპონენტები აპლიკაციისთვის სპეციფიკური ქცევისთვის სივრცეს ტოვებს.

მაგალითად, ფინანსურმა დაფამ შეიძლება ტრანზაქციები ჯერ თარიღით, შემდეგ თანხით დაალაგოს, ხოლო CRM-ის მომხმარებელს კონტაქტები სტატუსისა და რეგიონის მიხედვით გაფილტროს. ეს ოპერაციები ცალკე საწარმოს ფუნქციის ლიცენზიის გარეშე არის ხელმისაწვდომი.

https://www.youtube.com/embed/CylzevoSJzg

უჯრედების შერჩევა, კლავიატურით navigაცია და Excel-ის მსგავსი რედაქტირება

gp-grid უჭერს მხარს უჯრედების შერჩევას, გადათრევით დიაპაზონის შერჩევას, Shift-კლიკით შერჩევის გაფართოებას და Ctrl-კლიკით ცალკეული უჯრედების გადართვას. კლავიატურით navigაცია მოიცავს ისრის ღილაკებს, Tab-ს, Enter-ს, Home-ს, End-სა და გავრცელებულ Ctrl-მალსახმობებს, რაც მომხმარებელს მაუსზე მუდმივად გადაუსვლელად მონაცემებთან მუშაობის საშუალებას აძლევს.

inline რედაქტირების ჩასართავად დააყენეთ editable: true სვეტზე. მომხმარებელს რედაქტირების დაწყება შეუძლია ორჯერ დაწკაპუნებით, Enter-ით, F2-ით ან უბრალოდ აკრეფით. Enter და Tab ცვლილებებს ადასტურებს, ხოლო Escape რედაქტირებას აუქმებს.

fill handle კიდევ ერთ სასარგებლო სპრედშიტის მსგავს ურთიერთქმედებას ამატებს: მომხმარებელს შეუძლია შერჩეული დიაპაზონის კუთხეში არსებული პატარა ღილაკი გადაათრიოს და მნიშვნელობები სამიზნე უჯრედებში დააკოპიროს. მორგებული edit renderer-ები და ვალიდატორები უფრო სპეციალიზებული ველებისა და ვალიდაციის წესებს მხარს უჭერს.

https://www.youtube.com/embed/igLTAVciVlA

მორგებადი renderer-ები, სტილი, ხაზგასმა და dark mode

მონაცემთა ცხრილი თქვენი აპლიკაციის ინტერფეისს უნდა ერგებოდეს, განსაკუთრებით მაშინ, როცა უჯრედები სტატუსს, ფულს, თარიღებს ან სხვა მნიშვნელობებს გამოხატავს, რომლებსაც მორგებული წარმოჩენა სჭირდება. gp-grid მხარს უჭერს მორგებულ cell, edit და header renderer-ებს, როგორც სვეტების აღწერაში პირდაპირ, ისე renderer-ების რეესტრების მეშვეობით.

valueFormatter ოფცია სასარგებლოა, როცა ნაჩვენები მნიშვნელობა ნედლი მონაცემებისგან განსხვავდება. მაგალითად, ხელფასის სვეტმა შეიძლება ვალუტის ფორმატი აჩვენოს, მაშინ როცა დალაგება და მნიშვნელობაზე დაფუძნებული ოპერაციები ქვედა რიცხვით მნიშვნელობას იყენებს.

{
  field: "salary",
  cellDataType: "number",
  width: 140,
  cellRenderer: SalaryRenderer,
  valueFormatter: (value) =>
    "$" + (value as number).toLocaleString(),
}

სტილიც მოქნილია. darkMode prop dark სტილს ჩართავს, ხოლო ჩაშენებული CSS nul-სპეციფიკურობის :where() სელექტორებს იყენებს, რაც ნაგულისხმევის გადაწერას საკუთარი კლასებით აადვილებს. Tailwind-ის @apply დირექტივა მხარდაჭერილია, ხოლო highlighting callback-ები სტრიქონების, სვეტების ან უჯრედების კლასებს ამატებს hover-ისთვის, მონაცვლეობითი სტრიქონებისთვის და crosshair ეფექტებისთვის.

https://www.youtube.com/embed/HlflZ_0tEvQ

ცოცხალი მონაცემების სტრიმინგი და სერვერული მონაცემები

gp-grid მხარს უჭერს როგორც მუდმივად ცვალებად მონაცემთა ნაკრებებს, ისე სერვერიდან მოთხოვნისამებრ ჩატვირთულ მონაცემებს. ეს მას შეეფერება ინტერფეისებისთვის, როგორიცაა საფონდო ტიკერები, ოპერაციული დაფები და ადმინისტრაციული ინსტრუმენტები, სადაც ჩანაწერები მომხმარებლის მუშაობისას შეიძლება შეიცვალოს.

React-ში ცოცხალი განახლებებისთვის useGridData hook იძლევა ცვლადი მონაცემთა წყაროს addRows და removeRows დამხმარე ფუნქციებით. ასევე შეგიძლიათ ცალკეული უჯრედები ან სტრიქონები მონაცემთა წყაროს მეშვეობით განაახლოთ. მისი debounceMs ოფცია სწრაფ ცვლილებებს ნაკლებ ტრანზაქციად აჯგუფებს, რაც ცხრილს ხშირი განახლებების ეფექტურად დამუშავებაში ეხმარება.

როცა მონაცემთა ნაკრები ძალიან დიდია იმისთვის, რომ მთლიანად ბრაუზერის მეხსიერებაში შეინახოთ, createServerDataSource საშუალებას აძლევს ცხრილს, თქვენი API-დან კონკრეტული სტრიქონების დიაპაზონი მოითხოვოს, სორტირებისა და ფილტრაციის ინფორმაციასთან ერთად.

import { Grid, createServerDataSource } from "@gp-grid/react";

const dataSource = createServerDataSource(async (request) => {
  const res = await fetch("/api/grid-data", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(request),
  });

  return res.json(); // { rows, totalRows }
});

<Grid columns={columns} dataSource={dataSource} rowHeight={36} />

თქვენმა endpoint-მა უნდა დააბრუნოს მოთხოვნილი სტრიქონები და სტრიქონების საერთო რაოდენობა. დაახლოებით 10 მილიონ სტრიქონზე მეტი მონაცემებისთვის gp-grid-ის წარმადობის გზამკვლევი სერვერულ ჩატვირთვას გირჩევთ.

https://www.youtube.com/embed/p5HRxA4GFEs

მოქნილი განლაგება: გადათრევა, ზომის შეცვლა, დამაგრება, გაყინვა და სვეტების დაჯგუფება

სასარგებლო მონაცემთა ცხრილმა მომხმარებელს უნდა მისცეს საშუალება, ინფორმაცია თავისი სამუშაო პროცესის მიხედვით დაალაგოს. gp-grid მხარს უჭერს სვეტების გადათრევას ახალ რიგში, ზომის შეცვლას მინიმალური და მაქსიმალური შეზღუდვებით, სვეტების დამაგრებას ორივე მხარეს და სტრიქონების გაყინვას სათაურის ქვეშ.

სვეტების ვირტუალიზაცია ფართო მონაცემებთან მუშაობისას ასევე ზღუდავს ჩამონტაჟებული სვეტების რაოდენობას. ცხრილი მხარს უჭერს მარჯვნიდან მარცხნივ განლაგებას, კონფიგურირებად სვეტების ზომას, ჩადგმულ სვეტების ჯგუფებსა და სტრიქონების სიმაღლეებს, რომლებიც სტრიქონის იდენტობის მიხედვით შეიძლება განსხვავდებოდეს.

მაგალითად, CRM-მა შეიძლება კონტაქტების სახელები ხილული დატოვოს, მაშინ როცა მომხმარებელი ჰორიზონტალურად ათვალიერებს კომპანიის დეტალებს, აქტივობის თარიღებსა და ანგარიშის მნიშვნელობებს. ფინანსურმა დაფამ შეიძლება მნიშვნელოვანი შემაჯამებელი სტრიქონები გაყინოს, მაშინ როცა მომხმარებელი მათ ქვემოთ არსებულ ჩანაწერებს ამოწმებს.

ბიბლიოთეკა ასევე გთავაზობთ ARIA grid როლებსა და კლავიატურის მხარდაჭერას. თუმცა მისი დოკუმენტაცია სრულ შესაბამისობას accessibility-სთან არ აცხადებს, ამიტომ მკაცრი მოთხოვნების მქონე აპლიკაციებმა საკუთარი აუდიტი და ტესტირება უნდა ჩაატარონ.

https://www.youtube.com/embed/EPf9ulynBdo

სტრიქონების დაჯგუფება, აგრეგაცია და პივოტ ცხრილები

gp-grid თავისუფალი Apache 2.0 ლიცენზიით მოიცავს სტრიქონების დაჯგუფებას, აგრეგაციასა და პივოტ ცხრილებს. ეს ფუნქციები ბრტყელ ჩანაწერებს სტრუქტურირებულ შეჯამებებად აქცევს და მომხმარებელს დიდი მონაცემთა ნაკრებების გამოკვლევის საშუალებას აძლევს ცალკე საწარმოს ლიცენზიის გარეშე.

სტრიქონების დაჯგუფება ჩანაწერებს გაშლად ჯგუფებად აწყობს, აგრეგატებითა და ჯამებით მნიშვნელობების შესაჯამებლად. მონაცემთა წყაროდან გამომდინარე, დაჯგუფების გამოთვლები შეიძლება ადგილობრივად შესრულდეს ან სერვერიდან მოთხოვნისამებრ ჩაიტვირთოს.

პივოტ ცხრილები საშუალებას გაძლევთ განზომილებები სვეტებად გარდაქმნათ და შედეგად მიღებული მონაცემები შეაჯამოთ, ან ადგილობრივად, ან წინასწარ გამოთვლილი პივოტ ცხრილების მეშვეობით. ეს სასარგებლოა ანალიტიკურ ინტერფეისებში, სადაც მომხმარებლებს კატეგორიების შედარება, ჯამების შემოწმება ან ინფორმაციის სხვადასხვა განზომილებით გადალაგება სჭირდებათ.

პროექტი ასევე გთავაზობთ დამატებით გზამკვლევებს ჩაწერის ბრძანებების, ისტორიისა და სვეტოვანი მონაცემთა წყაროების შესახებ. რადგან gp-grid ახალგაზრდა პროექტია, სანამ ამ შესაძლებლობებს ძირითად დამოკიდებულებად აქცევთ, გადახედეთ შესაბამის გზამკვლევებს და საკუთარ მონაცემებზე სცადეთ.

თუ თავად გსურთ მაგალითების შესწავლა, GitHub-ზე გამოვაქვეყნე gp-grid-ის სრული playground.

დააკლონირეთ რეპოზიტორია, გაუშვით ლოკალურად და გამოსცადეთ ყველა შვიდი ინტერაქტიული დემო.

AI კოდირების აგენტის დაწყება ოფიციალური gp-grid skill-ით

AI კოდირების აგენტებს დროის დაზოგვა შეუძლიათ მონაცემებით მძიმე ინტერფეისების აწყობისას, მაგრამ იმისთვის, რომ მუშა კოდი დააგენერირონ, ბიბლიოთეკისთვის სპეციფიკური ზუსტი მითითებები სჭირდებათ. gp-grid გთავაზობთ ოფიციალურ skill-ს, რომელიც კოდირების აგენტებს ეხმარება სწორი იმპორტების, სვეტების აღწერების, renderer-ებისა და მონაცემთა წყაროს API-ების გამოყენებაში მხარდაჭერილ ჩარჩოებში.

skill მოიცავს მთავარ SKILL.md ფაილს და ჩარჩოსპეციფიკურ მითითებებს React-ისთვის, Vue-სთვის, Angular-ისთვის და ჩარჩოსგან დამოუკიდებელი ბირთვისთვის. ის ასევე ფარავს ინტეგრაციის გავრცელებულ შეცდომებს, მაგალითად, კონტეინერის სიმაღლის დაყენების დავიწყებას, სტილების იმპორტის გამოტოვებას ან არასწორი თარიღის data type-ის გამოყენებას.

დააყენეთ თქვენი პროექტიდან:

npx skills add https://github.com/GioPat/gp-grid

# Update later
npx skills add GioPat/gp-grid

skill აგენტებს ეხმარება აირჩიონ კლიენტის მხარის მონაცემებს, ცოცხალ განახლებებსა და სერვერულ ჩატვირთვას შორის, მათ შორის სერვერული მონაცემებისთვის სწორ { startRow, endRow } მოთხოვნის ფორმას.

gp-grid vs AG Grid: ფუნქციები, ღირებულება და წარმადობა

React მონაცემთა ცხრილის არჩევა წარმადობის შედარებაზე მეტს მოითხოვს. ფუნქციების ხელმისაწვდომობა და ლიცენზირება პროექტის ჯამურ ღირებულებაზე დიდ გავლენას ახდენს. AG Grid Community და Enterprise მოდელს მიჰყვება: მისი Community გამოცემა უფასოა, მაგრამ რამდენიმე მოწინავე შესაძლებლობა, მათ შორის სტრიქონების დაჯგუფება და პივოტინგი, Enterprise ლიცენზიას მოითხოვს. gp-grid სხვანაირად მიდგება: ყველა ფუნქცია Apache 2.0 ლიცენზიით არის ხელმისაწვდომი, Enterprise დონისა და ფუნქციებზე დაფუძნებული ლიცენზირების შეზღუდვების გარეშე.

შემდეგი შედარება gp-grid-ის 2026 წლის ივლისის ბენჩმარკის შედეგებს იყენებს, რომელიც ერთმილიონიან სტრიქონზე ერთი და იგივე seed-ირებული მონაცემებითა და სვეტების აღწერით ჩატარდა. ეს შედეგები კონკრეტული ტესტის გარემოსა და სამუშაო დატვირთვისთვისაა და უნივერსალურ წარმადობის გარანტიებად არ უნდა ჩაითვალოს.

gp-grid გამოირჩევა, როცა მოწინავე მონაცემთა ცხრილის შესაძლებლობები გინდათ საწარმოს ლიცენზიის გადახდის გარეშე. ის ღირს განხილვას იმ აპლიკაციებისთვის, რომლებსაც სჭირდებათ დაჯგუფება, პივოტინგი, ვირტუალური სქროლინგი, რედაქტირება და სხვა მოწინავე ფუნქციები ერთ ღია კოდის ლიცენზიაში, ბენჩმარკში მცირე React ბანდლთან ერთად.

AG Grid ძლიერი არჩევანი შეიძლება იყოს, თუ თქვენი პროექტი უკვე მის ეკოსისტემას, დოკუმენტაციას, ინტეგრაციებსა და დამკვიდრებულ Community და Enterprise შეთავაზებებს ეყრდნობა. მისი Community გამოცემა საკმარისი იქნება აპლიკაციებისთვის, რომლებსაც მხოლოდ მისი უფასო ფუნქციები სჭირდებათ, ხოლო გუნდებს, რომლებსაც Enterprise ფუნქციონალი დასჭირდებათ, შეუძლიათ შეაფასონ, ემთხვევა თუ არა კომერციული ლიცენზია მათ მოთხოვნებს.

ვისთვის არის gp-grid?

gp-grid ღირს განხილვას, თუ გჭირდებათ ფუნქციებით მდიდარი, ღია კოდის მონაცემთა ცხრილი საწარმოს ლიცენზიის გარეშე. ის კარგად მოერგება:

• მონაცემებით მძიმე დაფების მშენებელ გუნდებს: ვირტუალური სქროლინგი და სერვერული ჩატვირთვა აპლიკაციებს დიდ მონაცემთა ნაკრებებთან მუშაობაში ეხმარება.
• დეველოპერებს, რომლებსაც მოწინავე ფუნქციები უფასოდ სჭირდებათ: სტრიქონების დაჯგუფება, პივოტ ცხრილები, უჯრედების შერჩევა, inline რედაქტირება და სვეტების დამაგრება ფასიანი დონეების გარეშე შედის.
• TypeScript-first პროექტებს: ჩაშენებული ტიპის განმარტებები ტიპიზებულ სვეტების კონფიგურაციასა და რედაქტორის ავტოშევსებას უჭერს მხარს.
• გუნდებს, რომლებიც ფრონტენდის სხვადასხვა ჩარჩოებზე მუშაობენ: დედიკირებული პაკეტები React-ს, Vue 3-სა და Angular-ს უჭერს მხარს, ხოლო მორგებული ინტეგრაციებისთვის არსებობს ჩარჩოსგან დამოუკიდებელი ბირთვი.
• პროექტებს მკაცრი ბანდლის ან დამოკიდებულების მოთხოვნებით: ბიბლიოთეკას არ აქვს გარე გაშვების დროის დამოკიდებულებები, ხოლო მისი გამოქვეყნებული React ბანდლის ზომა შეფასებად ღირებულია წარმადობაზე ორიენტირებული აპლიკაციებისთვის.
• დეველოპერებს, რომლებიც AI კოდირების აგენტებს იყენებენ: ოფიციალური gp-grid skill ჩარჩოსპეციფიკურ მითითებებსა და მაგალითებს აძლევს, რომ აგენტებმა თავსებადი ინტეგრაციები დააგენერირონ.

📌 თუ ეს სასარგებლოდ მიგაჩნიათ, განიხილეთ GitHub რეპოზიტორიის დაკვრა ვარსკვლავით; ეს ღia კოდის პროექტის მხარდაჭერასა და მის შემდგომ განვითარებას ეხმარება.

ხშირად დასმული კითხვები

რომელია საუკეთესო უფასო მონაცემთა ცხრილი React-ისთვის?
სწორი არჩევანი იმაზეა დამოკიდებული, რომელი ფუნქციები სჭირდება თქვენს აპლიკაციას. gp-grid ღირს განხილვას, თუ გსურთ ღია კოდის React მონაცემთა ცხრილი ვირტუალური სქროლინგით, რედაქტირებით, სტრიქონების დაჯგუფებითა და პივოტინგით Apache 2.0 ლიცენზიის ქვეშ. თუ თავად გსურთ მარკაპისა და ურთიერთქმედების ფენის აწყობა, უფრო შესაფერისი შეიძლება იყოს headless ბიბლიოთეკა, როგორიცაა TanStack Table.

მართლა უფასოა gp-grid, თუ არსებობს ფასიანი ფუნქციები?
gp-grid-ის ფუნქციები Apache 2.0 ლიცენზიით არის ხელმისაწვდომი, პროექტის აღწერით არც საწარმოს დონე და არც პაიწოლით დაბლოკილი ფუნქციური მოდულები არ არსებობს. შემნახველი შემოწირულობებს შეიძლება მიიღებდეს, მაგრამ ბიბლიოთეკის მოწინავე შესაძლებლობები კომერციულ ლიცენზიაზე არ არის დამოკიდებული.

მხარს უჭერს თუ არა gp-grid Angular-ს, Vue-სა და TypeScript-ს?
დიახ. gp-grid გთავაზობთ დedicated პაკეტებს React-ისთვის, Vue-სა და Angular-ისთვის, ჩარჩოსგან დამოუკიდებელ ბირთვთან ერთად. ის TypeScript-ზეა დაწერილი და ტიპის განმარტებებს შეიცავს, ასე რომ დეველოპერებს შეუძლიათ ტიპიზებული სვეტების აღწერა და რედაქტორის ავტოშევსება გამოიყენონ `@types` პაკეტების ცალკე დაყენების გარეშე.

შეუძლია თუ არა React მონაცემთა ცხრილს ერთი მილიონი სტრიქონის დამუშავება?
დიახ, სათანადო რენდერინგისა და მონაცემთა ჩატვირთვის სტრატეგიით. ვირტუალური სქროლინგი DOM-ში არენდერებული სტრიქონების რაოდენობას ზღუდავს, ხოლო სერვერული ჩატვირთვა აპლიკაციას მხოლოდ საჭირო ჩანაწერების მოთხოვნის საშუალებას აძლევს. gp-grid-ის გამოქვეყნებული ერთმილიონიანი ბენჩმარკი ათვლის სქროლინგის დროს საშუალოდ 56.2 FPS-ს აჩვენებს, თუმცა ფაქტობრივი შედეგები აპლიკაციასა და გარემოზეა დამოკიდებული.

რა არის საუკეთესო უფასო ალტერნატივა AG Grid Enterprise-ისთვის?
gp-grid ერთ-ერთი ვარიანტია, რომელიც შეგიძლიათ შეაფასოთ, თუ გჭირდებათ ისეთი ფუნქციები, როგორიცაა სტრიქონების დაჯგუფება და პივოტინგი, საწარმოს ლიცენზიის გარეშე. მისი გამოქვეყნებული ბენჩმარკი ასევე აჩვენებს ბანდლის უფრო მცირე ზომასა და სწრაფ შედეგებს რამდენიმე ტესტირებულ ოპერაციაზე. AG Grid-ს უფრო დამკვიდრებული ეკოსისტემა აქვს, ამიტომ არჩევამდე შეადარეთ თქვენს საჭირო ფუნქციებს, მხარდაჭერის მოთხოვნებსა და რეალურ სამუშაო დატვირთვას.

დასკვნითი აზრები

ღია კოდის მონაცემთა ცხრილის არჩევისას მხოლოდ ლიცენზიას არ უნდა შეხედოთ. წარმადობა, რედაქტირება, მორგება, მონაცემების ჩატვირთვა, ჩარჩოს მხარდაჭერა და პროექტის გრძელვადიანი მდგომარეობა — ყველაფერი განსაზღვრავს, კარგად ემსახურება თუ არა იგი თქვენს აპლიკაციას.

gp-grid ამ საკითხებს აერთიანებს TypeScript-first ბიბლიოთეკაში ვირტუალური სქროლინგით, React/Vue/Angular bindings-ებით და მოწინავე ფუნქციებით უფასო დონეებში. მისი ბენჩმარკის შედეგები პერსპექტიულია, თუმცა პროექტი ჯერ კიდევ ახალგაზრდაა და გამოქვეყნებულ ტესტს აქვს შეზღუდვები.

ამ სტატიაში მე gp-grid და მისი მთავარი ფუნქციები განვიხილე. შემდეგ სტატიაში კი მას რეალურ React პროექტზე გამოვცდი: გაგიზიარებთ დეველოპმენტის პროცესს, იმას, რაც კარგად იმუშავა და გამოწვევებს, რომლებსაც გზად შევხვდით. დარჩით ჩვენთან და ნახავთ gp-grid-ით აგების პრაქტიკულ მიმოხილვას!

მადლობა წაკითხვისთვის! 🙏🏻 იმედია სასარგებლო აღმოჩნდა ✅ გთხოვთ, დატოვოთ რეაქცია და გამოიწეროთ მეტისთვის 😍 შექმნილია 💙-ით: Hadil Ben Abdallah