[V1] Data Grid

[DanielleRameau]

Introduction

A data grid is a versatile component for displaying and managing large data sets in a structured format of rows and columns. It enhances usability by allowing easy scanning, sorting, filtering, and editing of data, making it essential for applications requiring efficient data organization.

Key Points

• Efficient Data Management: Streamlines organization, sorting, and filtering of large datasets.
• Enhanced User Interaction: Facilitates intuitive sorting, filtering, and inline editing for improved productivity.
• Clear Data Presentation: Presents complex information in a structured, easy-to-comprehend format.

Basic Grid component

Beta Give feedback

1. [Data grid] Research #1149
   6 of 6
   UX discovery +2
   
2. [Data grid] split up features for development #1153
   0 of 2
   development +1
   
3. [Data grid] Review code that is already available #1364
   8 of 10
   development +1
   
4. [Data grid] UI Design of Grid Table #1150
   3 of 33
   UI tokens +2
   
5. [Data Grid] UI Design of Grid header #1363
   0 of 3
   UI tokens +2
6. [Data grid] Apply tokens from design #1507
   0 of 2
   UI development +2
   
7. [Data grid] [Behaviour] Paginator #1383
   0 of 2
   UI development +2
8. [Data Grid] First draft of documentation #1390
   documentation +1
9. [Data grid] Make available in all themes #1151
   tokens +1
   
10. [Data grid] Accessibility #1384
    0 of 2
    development +1
11. Sorting (implementation as is)
12. [Data grid] the basics - code part #1518
    0 of 6
    development +1
13. [Data grid] Add keyboard navigation #1526
    development +1
14. [Data grid] Sticky columns #1527
    0 of 2
    development +1
15. [Data grid] Row grouping #1528
    +0
16. [Data grid] implement drag & drop #1529
    0 of 5
    UI accessibility development +3
17. [Data-grid] empty groups allowed in grid #1520
    development enhancement +2
18. [Data grid] number column component #1530
    0 of 5
    development +1

The next steps

Beta Give feedback

1. [Data grid] Finetune documentation #1152
   UX development documentation +3
   
2. [Data grid] Sorting patterns #1509
   UX wireframe +2
3. [Data grid] Filter patterns #1515
   +0
4. [Data grid] UI of drawer #1508
   +0
5. [Data grid] [Behaviour] Bulk Actions #1380
   0 of 2
   UI development +2
6. [Data grid] [Behaviour] Drag and Drop #1381
   0 of 2
   UI development +2
7. [Data grid] [Behaviour] Delete Content #1385
   0 of 2
   UI development +2
8. Filter component #1516
   +0
9. Data-grid groupheaders with object instead of string value #1519
   development enhancement +2
10. [Data Grid] Scrolling pattern (when do you scroll the page and when do you scroll the data grid)

CFA Interest

• Magister
• ItsLearning
• Clickedu
• Max Online
• Editorial Suite
• Sesame
• Kampus
• TEAS
• Bingel INT
• Bingel DC

Wireframes

Figma Research Page: https://www.figma.com/design/PGb66fVN325tu0IngRka66/SL-Component-Research?node-id=1048-21070&t=TtgJznthg8cSkdYm-4