sl-design-system / components

SL Design System
https://sanomalearning.design/
Apache License 2.0
40 stars 4 forks source link

[V1] Data Grid #771

Open DanielleRameau opened 11 months ago

DanielleRameau commented 11 months ago

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

### Basic Grid component
- [ ] https://github.com/sl-design-system/components/issues/1149
- [ ] https://github.com/sl-design-system/components/issues/1153
- [ ] https://github.com/sl-design-system/components/issues/1364
- [ ] https://github.com/sl-design-system/components/issues/1150
- [ ] https://github.com/sl-design-system/components/issues/1363
- [ ] https://github.com/sl-design-system/components/issues/1507
- [ ] https://github.com/sl-design-system/components/issues/1383
- [ ] https://github.com/sl-design-system/components/issues/1390
- [ ] https://github.com/sl-design-system/components/issues/1151
- [ ] https://github.com/sl-design-system/components/issues/1384
- [ ] Sorting (implementation as is)
- [ ] https://github.com/sl-design-system/components/issues/1518
- [ ] https://github.com/sl-design-system/components/issues/1526
- [ ] #1527
- [ ] https://github.com/sl-design-system/components/issues/1528
- [ ] #1529
- [ ] #1520
- [ ] https://github.com/sl-design-system/components/issues/1530
- [ ] https://github.com/sl-design-system/components/issues/1531
### The next steps
- [ ] https://github.com/sl-design-system/components/issues/1152
- [ ] https://github.com/sl-design-system/components/issues/1509
- [ ] https://github.com/sl-design-system/components/issues/1515
- [ ] https://github.com/sl-design-system/components/issues/1508
- [ ] https://github.com/sl-design-system/components/issues/1380
- [ ] https://github.com/sl-design-system/components/issues/1381
- [ ] https://github.com/sl-design-system/components/issues/1385
- [ ] https://github.com/sl-design-system/components/issues/1516
- [ ] https://github.com/sl-design-system/components/issues/1519
- [ ] [Data Grid] Scrolling pattern (when do you scroll the page and when do you scroll the data grid)
- [ ] https://github.com/sl-design-system/components/issues/1534

CFA Interest

Wireframes

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

grid-main_sections grid-elements-1 grid-header-stacking grid-row-density grid-row-styling grid-scroll-horizontal grid-scroll-vertical-on_grid grid-scroll-vertical-on_page
arecuenco-dsgn commented 2 weeks ago

Jeroen's Grid Filtering & Scrolling thread on Slack: https://sanoma.slack.com/archives/C03TEJ5AJCQ/p1727350493811439