Skip to content

Commit 0ef03f3

Browse files
vinitkhandal717vinitkhandal717
authored
Update table and sidebar component (#487)
* fix: adjust maxHeight handling in DataTable component for better responsiveness * feat: add showHeader prop to DataTable and DataTableHeader components * feat: add border radius to TableHeader and TableFooter components * feat: add isSelected prop to NavbarItem and update NavItem logic * fix: update zIndex value in Sidebar component for improved layering
1 parent 747363c commit 0ef03f3

File tree

11 files changed

+221
-26
lines changed

11 files changed

+221
-26
lines changed

‎apps/site/src/demos/SidebarDemo.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -457,48 +457,55 @@ const SidebarDemo = () => {
457457
leftSlot: (
458458
<Square style={{ width: '16px', height: '16px' }} />
459459
),
460+
isSelected: activeComponent === 'buttons',
460461
onClick: () => setActiveComponent('buttons'),
461462
},
462463
{
463464
label: 'Button Group',
464465
leftSlot: (
465466
<Grid style={{ width: '16px', height: '16px' }} />
466467
),
468+
isSelected: activeComponent === 'buttonGroups',
467469
onClick: () => setActiveComponent('buttonGroups'),
468470
},
469471
{
470472
label: 'Tag',
471473
leftSlot: (
472474
<TagIcon style={{ width: '16px', height: '16px' }} />
473475
),
476+
isSelected: activeComponent === 'tags',
474477
onClick: () => setActiveComponent('tags'),
475478
},
476479
{
477480
label: 'Avatar',
478481
leftSlot: (
479482
<Users style={{ width: '16px', height: '16px' }} />
480483
),
484+
isSelected: activeComponent === 'avatars',
481485
onClick: () => setActiveComponent('avatars'),
482486
},
483487
{
484488
label: 'Avatar Group',
485489
leftSlot: (
486490
<Users style={{ width: '16px', height: '16px' }} />
487491
),
492+
isSelected: activeComponent === 'avatarGroup',
488493
onClick: () => setActiveComponent('avatarGroup'),
489494
},
490495
{
491496
label: 'Breadcrumb',
492497
leftSlot: (
493498
<Grid style={{ width: '16px', height: '16px' }} />
494499
),
500+
isSelected: activeComponent === 'breadcrumb',
495501
onClick: () => setActiveComponent('breadcrumb'),
496502
},
497503
{
498504
label: 'Virtual List',
499505
leftSlot: (
500506
<List style={{ width: '16px', height: '16px' }} />
501507
),
508+
isSelected: activeComponent === 'virtualList',
502509
onClick: () => setActiveComponent('virtualList'),
503510
},
504511
],
@@ -512,27 +519,31 @@ const SidebarDemo = () => {
512519
leftSlot: (
513520
<FormInput style={{ width: '16px', height: '16px' }} />
514521
),
522+
isSelected: activeComponent === 'input',
515523
onClick: () => setActiveComponent('input'),
516524
},
517525
{
518526
label: 'Search Input',
519527
leftSlot: (
520528
<Search style={{ width: '16px', height: '16px' }} />
521529
),
530+
isSelected: activeComponent === 'searchInput',
522531
onClick: () => setActiveComponent('searchInput'),
523532
},
524533
{
525534
label: 'OTP Input',
526535
leftSlot: (
527536
<Shield style={{ width: '16px', height: '16px' }} />
528537
),
538+
isSelected: activeComponent === 'otpInput',
529539
onClick: () => setActiveComponent('otpInput'),
530540
},
531541
{
532542
label: 'Unit Input',
533543
leftSlot: (
534544
<Weight style={{ width: '16px', height: '16px' }} />
535545
),
546+
isSelected: activeComponent === 'unitInput',
536547
onClick: () => setActiveComponent('unitInput'),
537548
},
538549
{
@@ -542,6 +553,7 @@ const SidebarDemo = () => {
542553
style={{ width: '16px', height: '16px' }}
543554
/>
544555
),
556+
isSelected: activeComponent === 'numberInput',
545557
onClick: () => setActiveComponent('numberInput'),
546558
},
547559
{
@@ -551,24 +563,28 @@ const SidebarDemo = () => {
551563
style={{ width: '16px', height: '16px' }}
552564
/>
553565
),
566+
isSelected: activeComponent === 'dropdownInput',
554567
onClick: () => setActiveComponent('dropdownInput'),
555568
},
556569
{
557570
label: 'Text Area',
558571
leftSlot: (
559572
<FileText style={{ width: '16px', height: '16px' }} />
560573
),
574+
isSelected: activeComponent === 'textArea',
561575
onClick: () => setActiveComponent('textArea'),
562576
},
563577
{
564578
label: 'Multi Value Input',
565579
leftSlot: (
566580
<ListFilter style={{ width: '16px', height: '16px' }} />
567581
),
582+
isSelected: activeComponent === 'multiValueInput',
568583
onClick: () => setActiveComponent('multiValueInput'),
569584
},
570585
{
571586
label: 'Key Value Pair',
587+
isSelected: activeComponent === 'keyValuePair',
572588
onClick: () => setActiveComponent('keyValuePair'),
573589
},
574590
],
@@ -581,13 +597,15 @@ const SidebarDemo = () => {
581597
leftSlot: (
582598
<Layout style={{ width: '16px', height: '16px' }} />
583599
),
600+
isSelected: activeComponent === 'topbar',
584601
onClick: () => setActiveComponent('topbar'),
585602
},
586603
{
587604
label: 'Menu',
588605
leftSlot: (
589606
<MenuIcon style={{ width: '16px', height: '16px' }} />
590607
),
608+
isSelected: activeComponent === 'menu',
591609
items: [
592610
{
593611
label: 'Item 1',
@@ -596,6 +614,7 @@ const SidebarDemo = () => {
596614
style={{ width: '16px', height: '16px' }}
597615
/>
598616
),
617+
isSelected: activeComponent === 'menu',
599618
onClick: () => setActiveComponent('menu'),
600619
items: [
601620
{
@@ -608,6 +627,7 @@ const SidebarDemo = () => {
608627
}}
609628
/>
610629
),
630+
isSelected: activeComponent === 'menu',
611631
onClick: () => setActiveComponent('menu'),
612632
items: [
613633
{
@@ -620,6 +640,8 @@ const SidebarDemo = () => {
620640
}}
621641
/>
622642
),
643+
isSelected:
644+
activeComponent === 'menu',
623645
onClick: () =>
624646
setActiveComponent('menu'),
625647
},
@@ -642,27 +664,31 @@ const SidebarDemo = () => {
642664
leftSlot: (
643665
<List style={{ width: '16px', height: '16px' }} />
644666
),
667+
isSelected: activeComponent === 'singleSelect',
645668
onClick: () => setActiveComponent('singleSelect'),
646669
},
647670
{
648671
label: 'Multi Select',
649672
leftSlot: (
650673
<ListFilter style={{ width: '16px', height: '16px' }} />
651674
),
675+
isSelected: activeComponent === 'multiSelect',
652676
onClick: () => setActiveComponent('multiSelect'),
653677
},
654678
{
655679
label: 'Tabs',
656680
leftSlot: (
657681
<Layout style={{ width: '16px', height: '16px' }} />
658682
),
683+
isSelected: activeComponent === 'tabs',
659684
onClick: () => setActiveComponent('tabs'),
660685
},
661686
{
662687
label: 'Accordion',
663688
leftSlot: (
664689
<List style={{ width: '16px', height: '16px' }} />
665690
),
691+
isSelected: activeComponent === 'accordion',
666692
onClick: () => setActiveComponent('accordion'),
667693
},
668694
],
@@ -677,25 +703,29 @@ const SidebarDemo = () => {
677703
style={{ width: '16px', height: '16px' }}
678704
/>
679705
),
706+
isSelected: activeComponent === 'alerts',
680707
onClick: () => setActiveComponent('alerts'),
681708
},
682709
{
683710
label: 'Snackbar',
684711
leftSlot: (
685712
<BellIcon style={{ width: '16px', height: '16px' }} />
686713
),
714+
isSelected: activeComponent === 'snackbar',
687715
onClick: () => setActiveComponent('snackbar'),
688716
},
689717
{
690718
label: 'Tooltip',
691719
leftSlot: (
692720
<Info style={{ width: '16px', height: '16px' }} />
693721
),
722+
isSelected: activeComponent === 'tooltips',
694723
onClick: () => setActiveComponent('tooltips'),
695724
},
696725
{
697726
label: 'Modal',
698727
leftSlot: <Box style={{ width: '16px', height: '16px' }} />,
728+
isSelected: activeComponent === 'modal',
699729
onClick: () => setActiveComponent('modal'),
700730
},
701731
{
@@ -705,11 +735,13 @@ const SidebarDemo = () => {
705735
style={{ width: '16px', height: '16px' }}
706736
/>
707737
),
738+
isSelected: activeComponent === 'popover',
708739
onClick: () => setActiveComponent('popover'),
709740
},
710741
{
711742
label: 'Drawer',
712743
leftSlot: <Box style={{ width: '16px', height: '16px' }} />,
744+
isSelected: activeComponent === 'drawer',
713745
onClick: () => setActiveComponent('drawer'),
714746
},
715747
],
@@ -724,34 +756,39 @@ const SidebarDemo = () => {
724756
leftSlot: (
725757
<BarChart2 style={{ width: '16px', height: '16px' }} />
726758
),
759+
isSelected: activeComponent === 'charts',
727760
onClick: () => setActiveComponent('charts'),
728761
},
729762
{
730763
label: 'Stat Card',
731764
leftSlot: (
732765
<FileText style={{ width: '16px', height: '16px' }} />
733766
),
767+
isSelected: activeComponent === 'statCard',
734768
onClick: () => setActiveComponent('statCard'),
735769
},
736770
{
737771
label: 'Card',
738772
leftSlot: (
739773
<Square style={{ width: '16px', height: '16px' }} />
740774
),
775+
isSelected: activeComponent === 'card',
741776
onClick: () => setActiveComponent('card'),
742777
},
743778
{
744779
label: 'Progress Bar',
745780
leftSlot: (
746781
<BarChart2 style={{ width: '16px', height: '16px' }} />
747782
),
783+
isSelected: activeComponent === 'progressBar',
748784
onClick: () => setActiveComponent('progressBar'),
749785
},
750786
{
751787
label: 'Data Table',
752788
leftSlot: (
753789
<Table style={{ width: '16px', height: '16px' }} />
754790
),
791+
isSelected: activeComponent === 'dataTable',
755792
onClick: () => setActiveComponent('dataTable'),
756793
},
757794
{
@@ -761,6 +798,7 @@ const SidebarDemo = () => {
761798
style={{ width: '16px', height: '16px' }}
762799
/>
763800
),
801+
isSelected: activeComponent === 'dataRangePicker',
764802
onClick: () => setActiveComponent('dataRangePicker'),
765803
},
766804
],
@@ -775,27 +813,31 @@ const SidebarDemo = () => {
775813
leftSlot: (
776814
<Radio style={{ width: '16px', height: '16px' }} />
777815
),
816+
isSelected: activeComponent === 'radio',
778817
onClick: () => setActiveComponent('radio'),
779818
},
780819
{
781820
label: 'Checkbox',
782821
leftSlot: (
783822
<Square style={{ width: '16px', height: '16px' }} />
784823
), // Using Square as a placeholder icon
824+
isSelected: activeComponent === 'checkbox',
785825
onClick: () => setActiveComponent('checkbox'),
786826
},
787827
{
788828
label: 'Switch',
789829
leftSlot: (
790830
<Square style={{ width: '16px', height: '16px' }} />
791831
),
832+
isSelected: activeComponent === 'switch',
792833
onClick: () => setActiveComponent('switch'),
793834
},
794835
{
795836
label: 'Selectors',
796837
leftSlot: (
797838
<ListFilter style={{ width: '16px', height: '16px' }} />
798839
),
840+
isSelected: activeComponent === 'selectors',
799841
onClick: () => setActiveComponent('selectors'),
800842
},
801843
],
@@ -808,6 +850,7 @@ const SidebarDemo = () => {
808850
leftSlot: (
809851
<Type style={{ width: '16px', height: '16px' }} />
810852
),
853+
isSelected: activeComponent === 'fonts',
811854
onClick: () => setActiveComponent('fonts'),
812855
},
813856
],
@@ -820,13 +863,15 @@ const SidebarDemo = () => {
820863
leftSlot: (
821864
<Palette style={{ width: '16px', height: '16px' }} />
822865
),
866+
isSelected: activeComponent === 'colorPalette',
823867
onClick: () => setActiveComponent('colorPalette'),
824868
},
825869
{
826870
label: '🎨 All Components Demo',
827871
leftSlot: (
828872
<Grid style={{ width: '16px', height: '16px' }} />
829873
),
874+
isSelected: activeComponent === 'allComponents',
830875
onClick: () => setActiveComponent('allComponents'),
831876
},
832877
],

0 commit comments

Comments
 (0)