@varialkit/table 0.1.0 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples.tsx +17 -17
- package/package.json +6 -6
- package/src/Table.tsx +4 -4
package/examples.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { Button } from '@
|
|
4
|
-
import { Checkbox } from '@
|
|
3
|
+
import { Button } from '@varialkit/button';
|
|
4
|
+
import { Checkbox } from '@varialkit/checkbox';
|
|
5
5
|
|
|
6
6
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
7
7
|
import type { ReactElement } from 'react';
|
|
@@ -677,8 +677,8 @@ export const stories: Record<string, StoryDefinition> = {
|
|
|
677
677
|
title: 'Grid Default',
|
|
678
678
|
showProps: true,
|
|
679
679
|
render: () => <GridDefaultExample />,
|
|
680
|
-
code: `import { Table } from "@
|
|
681
|
-
import type { TableLayoutMode } from "@
|
|
680
|
+
code: `import { Table } from "@varialkit/table";
|
|
681
|
+
import type { TableLayoutMode } from "@varialkit/table";
|
|
682
682
|
|
|
683
683
|
export function Example() {
|
|
684
684
|
const [layoutMode, setLayoutMode] = useState<TableLayoutMode>("grid");
|
|
@@ -717,8 +717,8 @@ export function Example() {
|
|
|
717
717
|
title: 'Grid Masonry',
|
|
718
718
|
showProps: true,
|
|
719
719
|
render: () => <GridMasonryExample />,
|
|
720
|
-
code: `import { Table } from "@
|
|
721
|
-
import type { TableGridType, TableLayoutMode } from "@
|
|
720
|
+
code: `import { Table } from "@varialkit/table";
|
|
721
|
+
import type { TableGridType, TableLayoutMode } from "@varialkit/table";
|
|
722
722
|
|
|
723
723
|
export function Example() {
|
|
724
724
|
const [layoutMode, setLayoutMode] = useState<TableLayoutMode>("grid");
|
|
@@ -775,7 +775,7 @@ export function Example() {
|
|
|
775
775
|
title: 'List Only Layout',
|
|
776
776
|
showProps: true,
|
|
777
777
|
render: () => <ListOnlyLayoutExample />,
|
|
778
|
-
code: `import { Table } from "@
|
|
778
|
+
code: `import { Table } from "@varialkit/table";
|
|
779
779
|
|
|
780
780
|
export function Example() {
|
|
781
781
|
return (
|
|
@@ -795,7 +795,7 @@ export function Example() {
|
|
|
795
795
|
title: 'Overview',
|
|
796
796
|
showProps: true,
|
|
797
797
|
render: () => <DensityMenuExample />,
|
|
798
|
-
code: `import { Table } from "@
|
|
798
|
+
code: `import { Table } from "@varialkit/table";
|
|
799
799
|
import { createColumnHelper } from "@tanstack/react-table";
|
|
800
800
|
|
|
801
801
|
const columnHelper = createColumnHelper();
|
|
@@ -838,7 +838,7 @@ export function Example() {
|
|
|
838
838
|
enableColumnControls
|
|
839
839
|
/>
|
|
840
840
|
),
|
|
841
|
-
code: `import { Table } from "@
|
|
841
|
+
code: `import { Table } from "@varialkit/table";
|
|
842
842
|
|
|
843
843
|
export function Example() {
|
|
844
844
|
return (
|
|
@@ -856,7 +856,7 @@ export function Example() {
|
|
|
856
856
|
title: 'Pinned Columns',
|
|
857
857
|
showProps: true,
|
|
858
858
|
render: () => <PinnedColumnsExample />,
|
|
859
|
-
code: `import { Table } from "@
|
|
859
|
+
code: `import { Table } from "@varialkit/table";
|
|
860
860
|
import { createColumnHelper } from "@tanstack/react-table";
|
|
861
861
|
|
|
862
862
|
const columnHelper = createColumnHelper();
|
|
@@ -908,7 +908,7 @@ export function Example() {
|
|
|
908
908
|
title: 'Pagination',
|
|
909
909
|
showProps: true,
|
|
910
910
|
render: () => <PaginationExample />,
|
|
911
|
-
code: `import { Table } from "@
|
|
911
|
+
code: `import { Table } from "@varialkit/table";
|
|
912
912
|
import { getPaginationRowModel } from "@tanstack/react-table";
|
|
913
913
|
|
|
914
914
|
export function Example() {
|
|
@@ -935,7 +935,7 @@ export function Example() {
|
|
|
935
935
|
title: 'Pagination Controls',
|
|
936
936
|
showProps: true,
|
|
937
937
|
render: () => <PaginationControlsExample />,
|
|
938
|
-
code: `import { Table } from "@
|
|
938
|
+
code: `import { Table } from "@varialkit/table";
|
|
939
939
|
import { getPaginationRowModel } from "@tanstack/react-table";
|
|
940
940
|
|
|
941
941
|
export function Example() {
|
|
@@ -966,7 +966,7 @@ export function Example() {
|
|
|
966
966
|
title: 'Virtualized Rows',
|
|
967
967
|
showProps: true,
|
|
968
968
|
render: () => <VirtualizedRowsExample />,
|
|
969
|
-
code: `import { Table } from "@
|
|
969
|
+
code: `import { Table } from "@varialkit/table";
|
|
970
970
|
import { flexRender } from "@tanstack/react-table";
|
|
971
971
|
|
|
972
972
|
export function Example() {
|
|
@@ -1033,7 +1033,7 @@ export function Example() {
|
|
|
1033
1033
|
title: 'Expandable Rows',
|
|
1034
1034
|
showProps: true,
|
|
1035
1035
|
render: () => <ExpandableRowsExample />,
|
|
1036
|
-
code: `import { Table } from "@
|
|
1036
|
+
code: `import { Table } from "@varialkit/table";
|
|
1037
1037
|
import { createColumnHelper, getCoreRowModel, getExpandedRowModel } from "@tanstack/react-table";
|
|
1038
1038
|
|
|
1039
1039
|
const columnHelper = createColumnHelper();
|
|
@@ -1082,8 +1082,8 @@ export function Example() {
|
|
|
1082
1082
|
title: 'Selectable Rows',
|
|
1083
1083
|
showProps: true,
|
|
1084
1084
|
render: () => <SelectableRowsExample />,
|
|
1085
|
-
code: `import { Table } from "@
|
|
1086
|
-
import { Checkbox } from "@
|
|
1085
|
+
code: `import { Table } from "@varialkit/table";
|
|
1086
|
+
import { Checkbox } from "@varialkit/checkbox";
|
|
1087
1087
|
import { createColumnHelper } from "@tanstack/react-table";
|
|
1088
1088
|
|
|
1089
1089
|
const columnHelper = createColumnHelper();
|
|
@@ -1142,7 +1142,7 @@ export function Example() {
|
|
|
1142
1142
|
title: 'Large Data Performance',
|
|
1143
1143
|
showProps: true,
|
|
1144
1144
|
render: () => <LargeDataPerformanceExample />,
|
|
1145
|
-
code: `import { Table } from "@
|
|
1145
|
+
code: `import { Table } from "@varialkit/table";
|
|
1146
1146
|
import { getPaginationRowModel } from "@tanstack/react-table";
|
|
1147
1147
|
|
|
1148
1148
|
export function Example() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varialkit/table",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"types": "src/index.ts",
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@tanstack/react-table": "^8.21.2",
|
|
22
|
-
"@varialkit/
|
|
23
|
-
"@varialkit/dropdown": "0.1.
|
|
24
|
-
"@varialkit/
|
|
25
|
-
"@varialkit/
|
|
26
|
-
"@varialkit/
|
|
22
|
+
"@varialkit/checkbox": "0.1.3",
|
|
23
|
+
"@varialkit/dropdown": "0.1.3",
|
|
24
|
+
"@varialkit/button": "0.1.3",
|
|
25
|
+
"@varialkit/menu": "0.1.3",
|
|
26
|
+
"@varialkit/icons": "0.1.3"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "19.0.10",
|
package/src/Table.tsx
CHANGED
|
@@ -11,10 +11,10 @@ import type {
|
|
|
11
11
|
TableLayoutMode,
|
|
12
12
|
TableProps,
|
|
13
13
|
} from './Table.types';
|
|
14
|
-
import { Icon } from '@
|
|
15
|
-
import { Menu, MenuDropdown, MenuRow, MenuSeparator, MenuSubhead } from '@
|
|
16
|
-
import { Button } from '@
|
|
17
|
-
import { Dropdown } from '@
|
|
14
|
+
import { Icon } from '@varialkit/icons';
|
|
15
|
+
import { Menu, MenuDropdown, MenuRow, MenuSeparator, MenuSubhead } from '@varialkit/menu';
|
|
16
|
+
import { Button } from '@varialkit/button';
|
|
17
|
+
import { Dropdown } from '@varialkit/dropdown';
|
|
18
18
|
import './Table.scss';
|
|
19
19
|
|
|
20
20
|
export function Table<TData>({
|