Basic datagrid

Most basic headless implementation.

Example

Id
Name
Category
Price Retail
1
Sleek Plastic Computer
Beauty
114.71
2
Generic Bronze Towels
Clothing
215.7
3
Incredible Granite Chair
Home & Garden
372.47
4
Oriental Metal Pants
Electronics
490.23
5
Fantastic Ceramic Bacon
Sports
260.04
6
Luxurious Ceramic Gloves
Clothing
477.12
7
Gorgeous Steel Bacon
Home & Garden
267.37
8
Tasty Silk Fish
Electronics
1722.59
9
Fresh Silk Shoes
Electronics
1404.24
10
Practical Aluminum Mouse
Electronics
1948.73
11
Fresh Bamboo Salad
Clothing
217.56
12
Modern Bamboo Towels
Sports
96.43
13
Generic Cotton Salad
Clothing
159.33
14
Rustic Concrete Gloves
Home & Garden
165.69
15
Modern Rubber Pants
Sports
371.23
16
Sleek Steel Chicken
Clothing
200.27
17
Gorgeous Cotton Mouse
Beauty
78.89
18
Awesome Rubber Cheese
Clothing
265.11
19
Unbranded Silk Chips
Beauty
183.68
20
Small Steel Shirt
Beauty
446.24
21
Elegant Bronze Table
Home & Garden
466.11
22
Incredible Wooden Keyboard
Electronics
469.46
23
Luxurious Bamboo Fish
Beauty
443.38
24
Elegant Concrete Sausages
Sports
174.17
25
Awesome Plastic Tuna
Beauty
170.54
26
Oriental Aluminum Chicken
Electronics
1790.59
27
Oriental Plastic Ball
Home & Garden
404.68
28
Luxurious Bronze Soap
Sports
352.5
29
Tasty Silk Chair
Beauty
331.38
30
Awesome Ceramic Shoes
Clothing
270.15
31
Soft Plastic Computer
Home & Garden
125.79
32
Awesome Steel Chicken
Clothing
302.95
33
Licensed Metal Table
Clothing
403.71
34
Bespoke Granite Table
Beauty
189.04
35
Handcrafted Ceramic Mouse
Clothing
166.38
36
Frozen Marble Mouse
Electronics
830.08
37
Frozen Concrete Cheese
Home & Garden
349.59
38
Recycled Silk Soap
Sports
36.46
39
Luxurious Gold Fish
Sports
128.11
40
Generic Plastic Car
Electronics
117.1
41
Oriental Silk Shirt
Clothing
84.18
42
Recycled Metal Pizza
Sports
340.24
43
Handmade Cotton Salad
Sports
482.18
44
Soft Wooden Soap
Electronics
719.76
45
Oriental Silk Bacon
Beauty
83.61
46
Electronic Wooden Car
Home & Garden
197.6
47
Licensed Metal Ball
Electronics
738.75
48
Intelligent Aluminum Salad
Clothing
43.59
49
Electronic Rubber Chips
Electronics
1045.5
50
Awesome Aluminum Keyboard
Clothing
173.66

Key Points

  1. State Management:

    DatagridCore is responsible for maintaining the entire state of the datagrid, including columns, rows, sorting, filtering, selection, and pagination.

  2. Mandatory Columns:

    The columns configuration is required for the datagrid to function properly.

  3. Retrieving Leaf Columns: `

    datagrid.columns.getLeafColumns()` is used to extract the lowest-level columns in a hierarchical column structure, ensuring correct TypeScript typings and preventing runtime errors.

  4. Processing Rows Safely:

    We iterate over the rows obtained from datagrid.rows.getVisibleBasicRows(), which ensures that only visible rows are processed while satisfying TypeScript constraints.

  5. Cell Rendering Logic:

    The getCellContent(column, row.original) function determines the correct content to render for each cell by mapping the given column to its corresponding data in the row.

  6. Performance Considerations:

    The system is optimized to handle large datasets efficiently by working with only the necessary subset of data at any given time.

  7. Extensibility:

    The architecture allows for additional features such as custom cell rendering, row virtualization, and advanced filtering without disrupting core functionality.

  8. Styling Flexibility:

    The structure is designed to be flexible in terms of styling. It is up to the user to decide how to style and render the datagrid. The following example demonstrates a possible approach using @apply with Tailwind CSS to create a structure similar to a traditional table, but users are free to apply their own styles and layout as needed.