# Page snapshot ```yaml - generic [ref=e3]: - banner "Storybook" [ref=e6]: - heading "Storybook" [level=1] [ref=e7] - img - generic [ref=e11]: - generic [ref=e12]: - generic [ref=e13]: - link "Skip to content" [ref=e14] [cursor=pointer]: - /url: "#storybook-preview-wrapper" - link "Storybook" [ref=e16] [cursor=pointer]: - /url: ./ - img "Storybook" [ref=e17] - switch "Settings" [ref=e22] [cursor=pointer]: - img [ref=e23] - generic [ref=e28]: - generic [ref=e30] [cursor=pointer]: - button "Open onboarding guide" [ref=e34]: - img [ref=e36] - strong [ref=e38]: Get started - generic [ref=e39]: - button "Collapse onboarding checklist" [expanded] [ref=e40]: - img [ref=e41] - button "25% completed" [ref=e43]: - generic [ref=e44]: - img [ref=e45] - img [ref=e47] - generic [ref=e50]: 25% - list [ref=e52]: - listitem [ref=e53]: - button "Open onboarding guide for See what's new" [ref=e54] [cursor=pointer]: - img [ref=e56] - generic [ref=e59]: See what's new - button "Go" - listitem [ref=e60]: - button "Open onboarding guide for Change a story with Controls" [ref=e61] [cursor=pointer]: - img [ref=e63] - generic [ref=e66]: Change a story with Controls - listitem [ref=e67]: - button "Open onboarding guide for Install Vitest addon" [ref=e68] [cursor=pointer]: - img [ref=e70] - generic [ref=e73]: Install Vitest addon - generic [ref=e74]: Search for components - search [ref=e75]: - combobox "Search for components" [ref=e76]: - generic: - img - searchbox "Search for components" [ref=e77] - code: ⌃ K - button "Tag filters" [ref=e79] [cursor=pointer]: - img [ref=e80] - button "Create a new story" [ref=e82] [cursor=pointer]: - img [ref=e83] - navigation "Stories" [ref=e86]: - heading "Stories" [level=2] [ref=e87] - generic [ref=e89]: - generic [ref=e90]: - button "Collapse" [expanded] [ref=e91] [cursor=pointer]: - img [ref=e93] - text: Components - button "Expand all" [ref=e95] [cursor=pointer]: - img [ref=e96] - button "Boxer" [ref=e99] [cursor=pointer]: - generic [ref=e100]: - img [ref=e102] - img [ref=e104] - text: Boxer - button "Griddy" [expanded] [ref=e107] [cursor=pointer]: - generic [ref=e108]: - img [ref=e110] - img [ref=e112] - text: Griddy - link "Basic" [ref=e115] [cursor=pointer]: - /url: /?path=/story/components-griddy--basic - img [ref=e117] - text: Basic - link "Large Dataset" [ref=e120] [cursor=pointer]: - /url: /?path=/story/components-griddy--large-dataset - img [ref=e122] - text: Large Dataset - link "Single Selection" [ref=e125] [cursor=pointer]: - /url: /?path=/story/components-griddy--single-selection - img [ref=e127] - text: Single Selection - link "Multi Selection" [ref=e130] [cursor=pointer]: - /url: /?path=/story/components-griddy--multi-selection - img [ref=e132] - text: Multi Selection - link "Large Multi Selection" [ref=e135] [cursor=pointer]: - /url: /?path=/story/components-griddy--large-multi-selection - img [ref=e137] - text: Large Multi Selection - link "With Search" [ref=e140] [cursor=pointer]: - /url: /?path=/story/components-griddy--with-search - img [ref=e142] - text: With Search - link "Keyboard Navigation" [ref=e145] [cursor=pointer]: - /url: /?path=/story/components-griddy--keyboard-navigation - img [ref=e147] - text: Keyboard Navigation - generic [ref=e149]: - link "With Text Filtering" [ref=e150] [cursor=pointer]: - /url: /?path=/story/components-griddy--with-text-filtering - img [ref=e152] - text: With Text Filtering - link "Skip to content" [ref=e154] [cursor=pointer]: - /url: "#storybook-preview-wrapper" - link "With Number Filtering" [ref=e156] [cursor=pointer]: - /url: /?path=/story/components-griddy--with-number-filtering - img [ref=e158] - text: With Number Filtering - link "With Enum Filtering" [ref=e161] [cursor=pointer]: - /url: /?path=/story/components-griddy--with-enum-filtering - img [ref=e163] - text: With Enum Filtering - link "With Boolean Filtering" [ref=e166] [cursor=pointer]: - /url: /?path=/story/components-griddy--with-boolean-filtering - img [ref=e168] - text: With Boolean Filtering - link "With All Filter Types" [ref=e171] [cursor=pointer]: - /url: /?path=/story/components-griddy--with-all-filter-types - img [ref=e173] - text: With All Filter Types - link "Large Dataset With Filtering" [ref=e176] [cursor=pointer]: - /url: /?path=/story/components-griddy--large-dataset-with-filtering - img [ref=e178] - text: Large Dataset With Filtering - generic [ref=e180]: - button "Collapse" [expanded] [ref=e181] [cursor=pointer]: - img [ref=e183] - text: Former - button "Expand all" [ref=e185] [cursor=pointer]: - img [ref=e186] - button "Former Basic" [ref=e189] [cursor=pointer]: - generic [ref=e190]: - img [ref=e192] - img [ref=e194] - text: Former Basic - button "Controls Basic" [ref=e197] [cursor=pointer]: - generic [ref=e198]: - img [ref=e200] - img [ref=e202] - text: Controls Basic - generic [ref=e204]: - button "Collapse" [expanded] [ref=e205] [cursor=pointer]: - img [ref=e207] - text: State - button "Expand all" [ref=e209] [cursor=pointer]: - img [ref=e210] - button "GlobalStateStore" [ref=e213] [cursor=pointer]: - generic [ref=e214]: - img [ref=e216] - img [ref=e218] - text: GlobalStateStore - generic [ref=e220]: - button "Collapse" [expanded] [ref=e221] [cursor=pointer]: - img [ref=e223] - text: Grid - button "Expand all" [ref=e225] [cursor=pointer]: - img [ref=e226] - button "Gridler API" [ref=e229] [cursor=pointer]: - generic [ref=e230]: - img [ref=e232] - img [ref=e234] - text: Gridler API - button "Gridler Local" [ref=e237] [cursor=pointer]: - generic [ref=e238]: - img [ref=e240] - img [ref=e242] - text: Gridler Local - generic [ref=e244]: - button "Collapse" [expanded] [ref=e245] [cursor=pointer]: - img [ref=e247] - text: UI - button "Expand all" [ref=e249] [cursor=pointer]: - img [ref=e250] - button "Mantine Better Menu" [ref=e253] [cursor=pointer]: - generic [ref=e254]: - img [ref=e256] - img [ref=e258] - text: Mantine Better Menu - generic [ref=e261]: - region "Toolbar" [ref=e262]: - heading "Toolbar" [level=2] [ref=e263] - toolbar [ref=e264]: - generic [ref=e265]: - button "Reload story" [ref=e266] [cursor=pointer]: - img [ref=e267] - switch "Grid visibility" [ref=e269] [cursor=pointer]: - img [ref=e270] - button "Preview background" [ref=e272] [cursor=pointer]: - img [ref=e273] - switch "Measure tool" [ref=e276] [cursor=pointer]: - img [ref=e277] - switch "Outline tool" [ref=e280] [cursor=pointer]: - img [ref=e281] - button "Viewport size" [ref=e283] [cursor=pointer]: - img [ref=e284] - generic [ref=e288]: - switch "Change zoom level" [ref=e289] [cursor=pointer]: 100% - button "Enter full screen" [ref=e290] [cursor=pointer]: - img [ref=e291] - button "Share" [ref=e293] [cursor=pointer]: - img [ref=e294] - button "Open in editor" [ref=e297] [cursor=pointer]: - img [ref=e298] - main "Main preview area" [ref=e301]: - heading "Main preview area" [level=2] [ref=e302] - generic [ref=e304]: - link "Skip to sidebar" [ref=e305] [cursor=pointer]: - /url: "#components-griddy--with-text-filtering" - iframe [ref=e309]: - generic [ref=f1e4]: - grid "Data grid" [ref=f1e5]: - generic [ref=f1e6]: - rowgroup [ref=f1e7]: - row "ID First Name Filter status indicator Last Name Filter status indicator Email Age Department Salary Start Date Active" [ref=f1e8]: - columnheader "ID" [ref=f1e9] [cursor=pointer]: - generic [ref=f1e11]: ID - columnheader "First Name Filter status indicator" [ref=f1e13] [cursor=pointer]: - generic [ref=f1e15]: - text: First Name - button "Filter status indicator" [disabled] [ref=f1e16]: - img [ref=f1e18] - columnheader "Last Name Filter status indicator" [ref=f1e21] [cursor=pointer]: - generic [ref=f1e23]: - text: Last Name - button "Filter status indicator" [disabled] [ref=f1e24]: - img [ref=f1e26] - columnheader "Email" [ref=f1e29] [cursor=pointer]: - generic [ref=f1e31]: Email - columnheader "Age" [ref=f1e33] [cursor=pointer]: - generic [ref=f1e35]: Age - columnheader "Department" [ref=f1e37] [cursor=pointer]: - generic [ref=f1e39]: Department - columnheader "Salary" [ref=f1e41] [cursor=pointer]: - generic [ref=f1e43]: Salary - columnheader "Start Date" [ref=f1e45] [cursor=pointer]: - generic [ref=f1e47]: Start Date - columnheader "Active" [ref=f1e49] [cursor=pointer]: - generic [ref=f1e51]: Active - rowgroup [ref=f1e53]: - row "1 Alice Smith alice.smith@example.com 22 Engineering $40,000 2020-01-01 No" [ref=f1e54]: - gridcell "1" [ref=f1e55] - gridcell "Alice" [ref=f1e56] - gridcell "Smith" [ref=f1e57] - gridcell "alice.smith@example.com" [ref=f1e58] - gridcell "22" [ref=f1e59] - gridcell "Engineering" [ref=f1e60] - gridcell "$40,000" [ref=f1e61] - gridcell "2020-01-01" [ref=f1e62] - gridcell "No" [ref=f1e63] - row "2 Bob Johnson bob.johnson@example.com 23 Marketing $41,234 2021-02-02 Yes" [ref=f1e64]: - gridcell "2" [ref=f1e65] - gridcell "Bob" [ref=f1e66] - gridcell "Johnson" [ref=f1e67] - gridcell "bob.johnson@example.com" [ref=f1e68] - gridcell "23" [ref=f1e69] - gridcell "Marketing" [ref=f1e70] - gridcell "$41,234" [ref=f1e71] - gridcell "2021-02-02" [ref=f1e72] - gridcell "Yes" [ref=f1e73] - row "3 Charlie Williams charlie.williams@example.com 24 Sales $42,468 2022-03-03 Yes" [ref=f1e74]: - gridcell "3" [ref=f1e75] - gridcell "Charlie" [ref=f1e76] - gridcell "Williams" [ref=f1e77] - gridcell "charlie.williams@example.com" [ref=f1e78] - gridcell "24" [ref=f1e79] - gridcell "Sales" [ref=f1e80] - gridcell "$42,468" [ref=f1e81] - gridcell "2022-03-03" [ref=f1e82] - gridcell "Yes" [ref=f1e83] - row "4 Diana Brown diana.brown@example.com 25 HR $43,702 2023-04-04 No" [ref=f1e84]: - gridcell "4" [ref=f1e85] - gridcell "Diana" [ref=f1e86] - gridcell "Brown" [ref=f1e87] - gridcell "diana.brown@example.com" [ref=f1e88] - gridcell "25" [ref=f1e89] - gridcell "HR" [ref=f1e90] - gridcell "$43,702" [ref=f1e91] - gridcell "2023-04-04" [ref=f1e92] - gridcell "No" [ref=f1e93] - row "5 Eve Jones eve.jones@example.com 26 Finance $44,936 2024-05-05 Yes" [ref=f1e94]: - gridcell "5" [ref=f1e95] - gridcell "Eve" [ref=f1e96] - gridcell "Jones" [ref=f1e97] - gridcell "eve.jones@example.com" [ref=f1e98] - gridcell "26" [ref=f1e99] - gridcell "Finance" [ref=f1e100] - gridcell "$44,936" [ref=f1e101] - gridcell "2024-05-05" [ref=f1e102] - gridcell "Yes" [ref=f1e103] - row "6 Frank Garcia frank.garcia@example.com 27 Design $46,170 2020-06-06 Yes" [ref=f1e104]: - gridcell "6" [ref=f1e105] - gridcell "Frank" [ref=f1e106] - gridcell "Garcia" [ref=f1e107] - gridcell "frank.garcia@example.com" [ref=f1e108] - gridcell "27" [ref=f1e109] - gridcell "Design" [ref=f1e110] - gridcell "$46,170" [ref=f1e111] - gridcell "2020-06-06" [ref=f1e112] - gridcell "Yes" [ref=f1e113] - row "7 Grace Miller grace.miller@example.com 28 Legal $47,404 2021-07-07 No" [ref=f1e114]: - gridcell "7" [ref=f1e115] - gridcell "Grace" [ref=f1e116] - gridcell "Miller" [ref=f1e117] - gridcell "grace.miller@example.com" [ref=f1e118] - gridcell "28" [ref=f1e119] - gridcell "Legal" [ref=f1e120] - gridcell "$47,404" [ref=f1e121] - gridcell "2021-07-07" [ref=f1e122] - gridcell "No" [ref=f1e123] - row "8 Henry Davis henry.davis@example.com 29 Support $48,638 2022-08-08 Yes" [ref=f1e124]: - gridcell "8" [ref=f1e125] - gridcell "Henry" [ref=f1e126] - gridcell "Davis" [ref=f1e127] - gridcell "henry.davis@example.com" [ref=f1e128] - gridcell "29" [ref=f1e129] - gridcell "Support" [ref=f1e130] - gridcell "$48,638" [ref=f1e131] - gridcell "2022-08-08" [ref=f1e132] - gridcell "Yes" [ref=f1e133] - row "9 Ivy Martinez ivy.martinez@example.com 30 Engineering $49,872 2023-09-09 Yes" [ref=f1e134]: - gridcell "9" [ref=f1e135] - gridcell "Ivy" [ref=f1e136] - gridcell "Martinez" [ref=f1e137] - gridcell "ivy.martinez@example.com" [ref=f1e138] - gridcell "30" [ref=f1e139] - gridcell "Engineering" [ref=f1e140] - gridcell "$49,872" [ref=f1e141] - gridcell "2023-09-09" [ref=f1e142] - gridcell "Yes" [ref=f1e143] - row "10 Jack Anderson jack.anderson@example.com 31 Marketing $51,106 2024-10-10 No" [ref=f1e144]: - gridcell "10" [ref=f1e145] - gridcell "Jack" [ref=f1e146] - gridcell "Anderson" [ref=f1e147] - gridcell "jack.anderson@example.com" [ref=f1e148] - gridcell "31" [ref=f1e149] - gridcell "Marketing" [ref=f1e150] - gridcell "$51,106" [ref=f1e151] - gridcell "2024-10-10" [ref=f1e152] - gridcell "No" [ref=f1e153] - row "11 Karen Taylor karen.taylor@example.com 32 Sales $52,340 2020-11-11 Yes" [ref=f1e154]: - gridcell "11" [ref=f1e155] - gridcell "Karen" [ref=f1e156] - gridcell "Taylor" [ref=f1e157] - gridcell "karen.taylor@example.com" [ref=f1e158] - gridcell "32" [ref=f1e159] - gridcell "Sales" [ref=f1e160] - gridcell "$52,340" [ref=f1e161] - gridcell "2020-11-11" [ref=f1e162] - gridcell "Yes" [ref=f1e163] - row "12 Leo Thomas leo.thomas@example.com 33 HR $53,574 2021-12-12 Yes" [ref=f1e164]: - gridcell "12" [ref=f1e165] - gridcell "Leo" [ref=f1e166] - gridcell "Thomas" [ref=f1e167] - gridcell "leo.thomas@example.com" [ref=f1e168] - gridcell "33" [ref=f1e169] - gridcell "HR" [ref=f1e170] - gridcell "$53,574" [ref=f1e171] - gridcell "2021-12-12" [ref=f1e172] - gridcell "Yes" [ref=f1e173] - row "13 Mia Hernandez mia.hernandez@example.com 34 Finance $54,808 2022-01-13 No" [ref=f1e174]: - gridcell "13" [ref=f1e175] - gridcell "Mia" [ref=f1e176] - gridcell "Hernandez" [ref=f1e177] - gridcell "mia.hernandez@example.com" [ref=f1e178] - gridcell "34" [ref=f1e179] - gridcell "Finance" [ref=f1e180] - gridcell "$54,808" [ref=f1e181] - gridcell "2022-01-13" [ref=f1e182] - gridcell "No" [ref=f1e183] - row "14 Nick Moore nick.moore@example.com 35 Design $56,042 2023-02-14 Yes" [ref=f1e184]: - gridcell "14" [ref=f1e185] - gridcell "Nick" [ref=f1e186] - gridcell "Moore" [ref=f1e187] - gridcell "nick.moore@example.com" [ref=f1e188] - gridcell "35" [ref=f1e189] - gridcell "Design" [ref=f1e190] - gridcell "$56,042" [ref=f1e191] - gridcell "2023-02-14" [ref=f1e192] - gridcell "Yes" [ref=f1e193] - row "15 Olivia Martin olivia.martin@example.com 36 Legal $57,276 2024-03-15 Yes" [ref=f1e194]: - gridcell "15" [ref=f1e195] - gridcell "Olivia" [ref=f1e196] - gridcell "Martin" [ref=f1e197] - gridcell "olivia.martin@example.com" [ref=f1e198] - gridcell "36" [ref=f1e199] - gridcell "Legal" [ref=f1e200] - gridcell "$57,276" [ref=f1e201] - gridcell "2024-03-15" [ref=f1e202] - gridcell "Yes" [ref=f1e203] - row "16 Paul Jackson paul.jackson@example.com 37 Support $58,510 2020-04-16 No" [ref=f1e204]: - gridcell "16" [ref=f1e205] - gridcell "Paul" [ref=f1e206] - gridcell "Jackson" [ref=f1e207] - gridcell "paul.jackson@example.com" [ref=f1e208] - gridcell "37" [ref=f1e209] - gridcell "Support" [ref=f1e210] - gridcell "$58,510" [ref=f1e211] - gridcell "2020-04-16" [ref=f1e212] - gridcell "No" [ref=f1e213] - row "17 Quinn Thompson quinn.thompson@example.com 38 Engineering $59,744 2021-05-17 Yes" [ref=f1e214]: - gridcell "17" [ref=f1e215] - gridcell "Quinn" [ref=f1e216] - gridcell "Thompson" [ref=f1e217] - gridcell "quinn.thompson@example.com" [ref=f1e218] - gridcell "38" [ref=f1e219] - gridcell "Engineering" [ref=f1e220] - gridcell "$59,744" [ref=f1e221] - gridcell "2021-05-17" [ref=f1e222] - gridcell "Yes" [ref=f1e223] - row "18 Rose White rose.white@example.com 39 Marketing $60,978 2022-06-18 Yes" [ref=f1e224]: - gridcell "18" [ref=f1e225] - gridcell "Rose" [ref=f1e226] - gridcell "White" [ref=f1e227] - gridcell "rose.white@example.com" [ref=f1e228] - gridcell "39" [ref=f1e229] - gridcell "Marketing" [ref=f1e230] - gridcell "$60,978" [ref=f1e231] - gridcell "2022-06-18" [ref=f1e232] - gridcell "Yes" [ref=f1e233] - row "19 Sam Lopez sam.lopez@example.com 40 Sales $62,212 2023-07-19 No" [ref=f1e234]: - gridcell "19" [ref=f1e235] - gridcell "Sam" [ref=f1e236] - gridcell "Lopez" [ref=f1e237] - gridcell "sam.lopez@example.com" [ref=f1e238] - gridcell "40" [ref=f1e239] - gridcell "Sales" [ref=f1e240] - gridcell "$62,212" [ref=f1e241] - gridcell "2023-07-19" [ref=f1e242] - gridcell "No" [ref=f1e243] - row "20 Tina Lee tina.lee@example.com 41 HR $63,446 2024-08-20 Yes" [ref=f1e244]: - gridcell "20" [ref=f1e245] - gridcell "Tina" [ref=f1e246] - gridcell "Lee" [ref=f1e247] - gridcell "tina.lee@example.com" [ref=f1e248] - gridcell "41" [ref=f1e249] - gridcell "HR" [ref=f1e250] - gridcell "$63,446" [ref=f1e251] - gridcell "2024-08-20" [ref=f1e252] - gridcell "Yes" [ref=f1e253] - generic [ref=f1e254]: - strong [ref=f1e255]: "Active Filters:" - generic [ref=f1e256]: "[]" - region "Addon panel" [ref=e312]: - heading "Addon panel" [level=2] [ref=e313] - generic [ref=e314]: - generic [ref=e315]: - generic [ref=e316]: - button "Move addon panel to right" [ref=e317] [cursor=pointer]: - img [ref=e318] - button "Hide addon panel" [ref=e321] [cursor=pointer]: - img [ref=e322] - tablist "Available addons" [ref=e327]: - tab "Controls" [selected] [ref=e328] [cursor=pointer]: - generic [ref=e330]: Controls - tab "Actions" [ref=e331] [cursor=pointer]: - generic [ref=e333]: Actions - tab "Interactions" [ref=e334] [cursor=pointer]: - generic [ref=e336]: Interactions - tabpanel "Controls" [ref=e337]: - generic [ref=e344]: - button "Reset controls" [ref=e346] [cursor=pointer]: - img [ref=e347] - table [ref=e349]: - rowgroup [ref=e350]: - row "Name Description Default Control" [ref=e351]: - columnheader "Name" [ref=e352] - columnheader "Description" [ref=e353] - columnheader "Default" [ref=e354] - columnheader "Control" [ref=e355] - rowgroup [ref=e356]: - row "columns array - -" [ref=e357]: - cell "columns" [ref=e358] - cell "array" [ref=e359]: - generic [ref=e362]: array - cell "-" [ref=e363] - cell "-" [ref=e364] - row "data array - -" [ref=e365]: - cell "data" [ref=e366] - cell "array" [ref=e367]: - generic [ref=e370]: array - cell "-" [ref=e371] - cell "-" [ref=e372] - row "getRowId function - -" [ref=e373]: - cell "getRowId" [ref=e374] - cell "function" [ref=e375]: - generic [ref=e378]: function - cell "-" [ref=e379] - cell "-" [ref=e380] - row "height number - -" [ref=e381]: - cell "height" [ref=e382] - cell "number" [ref=e383]: - generic [ref=e386]: number - cell "-" [ref=e387] - cell "-" [ref=e388] ```