Skip to content

Commit a896ace

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
feat: Add enterprise data table component with Airtable-like features
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent b12f0a1 commit a896ace

3 files changed

Lines changed: 703 additions & 1 deletion

File tree

‎apps/playground/src/data/examples.ts‎

Lines changed: 257 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -638,6 +638,261 @@ export const examples = {
638638
]
639639
}
640640
]
641+
}`,
642+
643+
// Enterprise Data Table - Airtable-like functionality
644+
'enterprise-table': `{
645+
"type": "div",
646+
"className": "space-y-6",
647+
"body": [
648+
{
649+
"type": "div",
650+
"className": "space-y-2",
651+
"body": [
652+
{
653+
"type": "text",
654+
"content": "Enterprise Data Table",
655+
"className": "text-2xl font-bold"
656+
},
657+
{
658+
"type": "text",
659+
"content": "Full-featured data table with sorting, filtering, pagination, row selection, and export capabilities - similar to Airtable",
660+
"className": "text-muted-foreground"
661+
}
662+
]
663+
},
664+
{
665+
"type": "data-table",
666+
"caption": "User Management Table",
667+
"pagination": true,
668+
"pageSize": 10,
669+
"searchable": true,
670+
"selectable": true,
671+
"sortable": true,
672+
"exportable": true,
673+
"rowActions": true,
674+
"columns": [
675+
{
676+
"header": "ID",
677+
"accessorKey": "id",
678+
"width": "80px",
679+
"sortable": true
680+
},
681+
{
682+
"header": "Name",
683+
"accessorKey": "name",
684+
"sortable": true
685+
},
686+
{
687+
"header": "Email",
688+
"accessorKey": "email",
689+
"sortable": true
690+
},
691+
{
692+
"header": "Department",
693+
"accessorKey": "department",
694+
"sortable": true
695+
},
696+
{
697+
"header": "Status",
698+
"accessorKey": "status",
699+
"sortable": true
700+
},
701+
{
702+
"header": "Role",
703+
"accessorKey": "role",
704+
"sortable": true
705+
},
706+
{
707+
"header": "Join Date",
708+
"accessorKey": "joinDate",
709+
"sortable": true
710+
}
711+
],
712+
"data": [
713+
{
714+
"id": 1,
715+
"name": "John Doe",
716+
"email": "john.doe@company.com",
717+
"department": "Engineering",
718+
"status": "Active",
719+
"role": "Senior Engineer",
720+
"joinDate": "2020-03-15"
721+
},
722+
{
723+
"id": 2,
724+
"name": "Jane Smith",
725+
"email": "jane.smith@company.com",
726+
"department": "Product",
727+
"status": "Active",
728+
"role": "Product Manager",
729+
"joinDate": "2019-07-22"
730+
},
731+
{
732+
"id": 3,
733+
"name": "Bob Johnson",
734+
"email": "bob.johnson@company.com",
735+
"department": "Sales",
736+
"status": "Inactive",
737+
"role": "Sales Rep",
738+
"joinDate": "2021-01-10"
739+
},
740+
{
741+
"id": 4,
742+
"name": "Alice Williams",
743+
"email": "alice.williams@company.com",
744+
"department": "Engineering",
745+
"status": "Active",
746+
"role": "Engineering Manager",
747+
"joinDate": "2018-11-05"
748+
},
749+
{
750+
"id": 5,
751+
"name": "Charlie Brown",
752+
"email": "charlie.brown@company.com",
753+
"department": "Marketing",
754+
"status": "Active",
755+
"role": "Marketing Specialist",
756+
"joinDate": "2022-02-28"
757+
},
758+
{
759+
"id": 6,
760+
"name": "Diana Prince",
761+
"email": "diana.prince@company.com",
762+
"department": "HR",
763+
"status": "Active",
764+
"role": "HR Director",
765+
"joinDate": "2017-06-12"
766+
},
767+
{
768+
"id": 7,
769+
"name": "Ethan Hunt",
770+
"email": "ethan.hunt@company.com",
771+
"department": "Operations",
772+
"status": "Inactive",
773+
"role": "Operations Lead",
774+
"joinDate": "2020-09-01"
775+
},
776+
{
777+
"id": 8,
778+
"name": "Fiona Gallagher",
779+
"email": "fiona.gallagher@company.com",
780+
"department": "Finance",
781+
"status": "Active",
782+
"role": "Financial Analyst",
783+
"joinDate": "2021-04-18"
784+
},
785+
{
786+
"id": 9,
787+
"name": "George Wilson",
788+
"email": "george.wilson@company.com",
789+
"department": "Product",
790+
"status": "Active",
791+
"role": "Product Designer",
792+
"joinDate": "2019-12-03"
793+
},
794+
{
795+
"id": 10,
796+
"name": "Hannah Montana",
797+
"email": "hannah.montana@company.com",
798+
"department": "Marketing",
799+
"status": "Active",
800+
"role": "Content Creator",
801+
"joinDate": "2022-05-20"
802+
},
803+
{
804+
"id": 11,
805+
"name": "Ivan Drago",
806+
"email": "ivan.drago@company.com",
807+
"department": "Engineering",
808+
"status": "Inactive",
809+
"role": "Junior Engineer",
810+
"joinDate": "2023-01-15"
811+
},
812+
{
813+
"id": 12,
814+
"name": "Julia Roberts",
815+
"email": "julia.roberts@company.com",
816+
"department": "Legal",
817+
"status": "Active",
818+
"role": "Legal Counsel",
819+
"joinDate": "2018-08-25"
820+
},
821+
{
822+
"id": 13,
823+
"name": "Kevin Hart",
824+
"email": "kevin.hart@company.com",
825+
"department": "Sales",
826+
"status": "Active",
827+
"role": "Sales Director",
828+
"joinDate": "2019-03-10"
829+
},
830+
{
831+
"id": 14,
832+
"name": "Laura Palmer",
833+
"email": "laura.palmer@company.com",
834+
"department": "Customer Support",
835+
"status": "Active",
836+
"role": "Support Lead",
837+
"joinDate": "2020-11-22"
838+
},
839+
{
840+
"id": 15,
841+
"name": "Mike Tyson",
842+
"email": "mike.tyson@company.com",
843+
"department": "Operations",
844+
"status": "Active",
845+
"role": "Operations Manager",
846+
"joinDate": "2021-07-05"
847+
}
848+
]
849+
}
850+
]
851+
}`,
852+
853+
'data-table-simple': `{
854+
"type": "div",
855+
"className": "space-y-6",
856+
"body": [
857+
{
858+
"type": "div",
859+
"className": "space-y-2",
860+
"body": [
861+
{
862+
"type": "text",
863+
"content": "Simple Data Table",
864+
"className": "text-2xl font-bold"
865+
},
866+
{
867+
"type": "text",
868+
"content": "Minimal configuration with essential features only",
869+
"className": "text-muted-foreground"
870+
}
871+
]
872+
},
873+
{
874+
"type": "data-table",
875+
"pagination": false,
876+
"searchable": false,
877+
"selectable": false,
878+
"sortable": true,
879+
"exportable": false,
880+
"rowActions": false,
881+
"columns": [
882+
{ "header": "Product", "accessorKey": "product" },
883+
{ "header": "Price", "accessorKey": "price" },
884+
{ "header": "Stock", "accessorKey": "stock" },
885+
{ "header": "Category", "accessorKey": "category" }
886+
],
887+
"data": [
888+
{ "product": "Laptop", "price": "$999", "stock": "45", "category": "Electronics" },
889+
{ "product": "Mouse", "price": "$29", "stock": "150", "category": "Accessories" },
890+
{ "product": "Keyboard", "price": "$79", "stock": "89", "category": "Accessories" },
891+
{ "product": "Monitor", "price": "$299", "stock": "32", "category": "Electronics" },
892+
{ "product": "Desk Chair", "price": "$199", "stock": "18", "category": "Furniture" }
893+
]
894+
}
895+
]
641896
}`
642897
};
643898

@@ -646,5 +901,6 @@ export type ExampleKey = keyof typeof examples;
646901
export const exampleCategories = {
647902
'Primitives': ['simple-page', 'input-states', 'button-variants'],
648903
'Layouts': ['grid-layout', 'dashboard', 'tabs-demo'],
649-
'Forms': ['form-demo']
904+
'Forms': ['form-demo'],
905+
'Data Display': ['enterprise-table', 'data-table-simple']
650906
};

0 commit comments

Comments
 (0)