components icon indicating copy to clipboard operation
components copied to clipboard

[V1] Data Grid

Open DanielleRameau opened this issue 2 years ago • 1 comments

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.
### Priority
- [ ] https://github.com/sl-design-system/components/issues/1526
- [ ] https://github.com/sl-design-system/components/issues/1383
- [ ] https://github.com/sl-design-system/components/issues/1665
- [ ] https://github.com/sl-design-system/components/issues/1380
- [ ] https://github.com/sl-design-system/components/issues/1515
- [ ] https://github.com/sl-design-system/components/issues/1672
- [ ] https://github.com/sl-design-system/components/issues/1673
- [ ] https://github.com/sl-design-system/components/issues/1390
- [ ] #1529
### 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/1384
- [ ] https://github.com/sl-design-system/components/issues/1509
- [ ] Sorting (implementation as is)
- [ ] https://github.com/sl-design-system/components/issues/1518
- [ ] #1527
- [ ] https://github.com/sl-design-system/components/issues/1528
- [ ] #1520
- [ ] https://github.com/sl-design-system/components/issues/1530
- [ ] https://github.com/sl-design-system/components/issues/1531
- [ ] https://github.com/sl-design-system/components/issues/1516
### The next steps
- [ ] https://github.com/sl-design-system/components/issues/1152
- [ ] https://github.com/sl-design-system/components/issues/1508
- [ ] 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/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

  • 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

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

DanielleRameau avatar Nov 22 '23 11:11 DanielleRameau

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

arecuenco-dsgn avatar Oct 02 '24 09:10 arecuenco-dsgn