(
13 | new Array(3).fill(0).map(() => ({
14 | name: faker.name.firstName(),
15 | int: faker.datatype.number(100),
16 | date: new Date(faker.date.past()),
17 | }))
18 | )
19 |
20 | return (
21 |
22 | ({ int: 25, date: new Date() })}
26 | duplicateRow={({ rowData }) => ({
27 | ...rowData,
28 | int: rowData.int ?? 25,
29 | date: rowData.date ?? new Date(),
30 | })}
31 | columns={[
32 | { ...keyColumn('name', textColumn), title: 'Name' },
33 | { ...keyColumn('int', intColumn), title: 'Age' },
34 | { ...keyColumn('date', dateColumn), title: 'Birthday' },
35 | ]}
36 | />
37 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/website/src/demos/disableColumns.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import {
3 | checkboxColumn,
4 | DataSheetGrid,
5 | keyColumn,
6 | textColumn,
7 | } from 'react-datasheet-grid'
8 | import faker from 'faker'
9 |
10 | export default () => {
11 | const [data, setData] = useState(
12 | new Array(5).fill(0).map(() => ({
13 | active: faker.datatype.boolean(),
14 | firstName: faker.name.firstName(),
15 | lastName: faker.name.lastName(),
16 | }))
17 | )
18 |
19 | return (
20 |
21 | !rowData.active,
30 | },
31 | {
32 | ...keyColumn('lastName', textColumn),
33 | title: 'Last name',
34 | disabled: true,
35 | },
36 | ]}
37 | />
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/website/src/demos/infiniteScroll.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useMemo, useState } from 'react'
2 | import { DataSheetGrid, intColumn, keyColumn, textColumn } from 'react-datasheet-grid'
3 | import { QueryClient, QueryClientProvider, useInfiniteQuery } from 'react-query';
4 |
5 | type User = Record;
6 | const usersPerPage = 50;
7 |
8 | const InfiniteScroll = () => {
9 | const [users, setUsers] = useState([]);
10 | const columns = useMemo(() => {
11 | return [
12 | { ...keyColumn('id', intColumn), title: 'id', disabled: true },
13 | { ...keyColumn('name', textColumn), title: 'name' },
14 | ]
15 | }, []);
16 |
17 | const { fetchNextPage, isFetching, hasNextPage } = useInfiniteQuery('example', async ({ pageParam = 1 }): Promise => {
18 | /// Fake waiting time for data
19 | await new Promise((resolve) => setTimeout(resolve, 500));
20 | /// Build mock data
21 | return new Array(usersPerPage).fill(0).map((_, i) => {
22 | const id = (pageParam - 1) * usersPerPage + i + 1
23 | return { id, name: `User ${id}` };
24 | });
25 | }, {
26 | onSuccess: ({ pages }) => setUsers(pages.flat()),
27 | getNextPageParam: (_, pages) => pages.length + 1,
28 | keepPreviousData: true,
29 | refetchOnWindowFocus: false,
30 | });
31 |
32 | const fetchMoreOnBottomReached = useCallback>((e) => {
33 | const scrollableElement = e.target as HTMLDivElement;
34 | if (scrollableElement) {
35 | const { scrollHeight, scrollTop, clientHeight } = scrollableElement
36 | //once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any
37 | if (
38 | scrollHeight - scrollTop - clientHeight < 300 &&
39 | !isFetching &&
40 | hasNextPage
41 | ) {
42 | fetchNextPage()
43 | }
44 | }
45 | }, [fetchNextPage, isFetching, hasNextPage]);
46 |
47 | return (
48 | <>
49 |
50 | value={users}
51 | onChange={setUsers}
52 | columns={columns}
53 | height={500}
54 | ///onScroll={fetchMoreOnBottomReached}
55 | />
56 |
57 | Data size: {users.length} - Status: {isFetching ? 'loading' : 'idle'}
58 |
59 |
60 | )
61 | }
62 |
63 | /// Setup react-query
64 | const queryClient = new QueryClient();
65 | export const FinalResult = () => {
66 | return (
67 |
68 |
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/website/src/demos/lockRows.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import {
3 | checkboxColumn,
4 | DataSheetGrid,
5 | keyColumn,
6 | textColumn,
7 | } from 'react-datasheet-grid'
8 | import faker from 'faker'
9 |
10 | export default () => {
11 | const [data, setData] = useState(
12 | new Array(5).fill(0).map(() => ({
13 | active: faker.datatype.boolean(),
14 | firstName: faker.name.firstName(),
15 | lastName: faker.name.lastName(),
16 | }))
17 | )
18 |
19 | return (
20 |
21 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/website/src/demos/options.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { DataSheetGrid, keyColumn, textColumn } from 'react-datasheet-grid'
3 | import faker from 'faker'
4 | import Switch from 'rc-switch'
5 | import 'rc-switch/assets/index.css'
6 | import CodeBlock from '@theme/CodeBlock'
7 |
8 | export default () => {
9 | const [data, setData] = useState(
10 | new Array(5).fill(0).map(() => ({
11 | firstName: faker.name.firstName(),
12 | lastName: faker.name.lastName(),
13 | }))
14 | )
15 | const [lockRows, setLockRows] = useState(false)
16 | const [autoAddRow, setAutoAddRow] = useState(false)
17 | const [disableContextMenu, setDisableContextMenu] = useState(false)
18 | const [disableExpandSelection, setDisableExpandSelection] = useState(false)
19 |
20 | return (
21 |
22 |
36 |
45 |
54 |
62 |
74 |
75 | {``}
84 |
85 |
29 | {
32 | ref.current?.setActiveCell({ col: 1, row: 3 })
33 | }}
34 | >
35 | {'ref.current?.setActiveCell({ col: 1, row: 3 })'}
36 |
37 | {
40 | ref.current?.setActiveCell({ col: 'lastName', row: 1 })
41 | }}
42 | >
43 | {"ref.current?.setActiveCell({ col: 'lastName', row: 1 })"}
44 |
45 | {
48 | ref.current?.setSelection({
49 | min: { col: 'active', row: 1 },
50 | max: { col: 1, row: 4 },
51 | })
52 | }}
53 | >
54 | {
55 | "ref.current?.setSelection({ min: { col: 'active', row: 1 }, max: { col: 1, row: 4 }})"
56 | }
57 |
58 | {
61 | ref.current?.setSelection(null)
62 | }}
63 | >
64 | {'ref.current?.setSelection(null)'}
65 |
66 |
67 |
78 |
79 | )
80 | }
81 |
--------------------------------------------------------------------------------
/website/src/demos/reponsive.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import {
3 | DataSheetGrid,
4 | checkboxColumn,
5 | textColumn,
6 | keyColumn,
7 | intColumn,
8 | } from 'react-datasheet-grid'
9 | import faker from 'faker'
10 | import { Rnd } from 'react-rnd'
11 |
12 | export default () => {
13 | const [data, setData] = useState(
14 | new Array(15).fill(0).map(() => ({
15 | active: faker.datatype.boolean(),
16 | firstName: faker.name.firstName(),
17 | lastName: faker.name.lastName(),
18 | int: faker.datatype.number(100),
19 | }))
20 | )
21 |
22 | return (
23 |
69 | )
70 | }
71 |
--------------------------------------------------------------------------------
/website/src/demos/simple.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import {
3 | DataSheetGrid,
4 | checkboxColumn,
5 | textColumn,
6 | keyColumn,
7 | } from 'react-datasheet-grid'
8 |
9 | export default () => {
10 | const [data, setData] = useState([
11 | { active: true, firstName: 'Elon', lastName: 'Musk' },
12 | { active: false, firstName: 'Jeff', lastName: 'Bezos' },
13 | ])
14 |
15 | return (
16 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/website/src/demos/sizing.css:
--------------------------------------------------------------------------------
1 | .preventCodeScroll pre {
2 | overflow: hidden;
3 | }
4 |
5 | .preventCodeScroll > div {
6 | margin: 0;
7 | box-shadow: none;
8 | }
--------------------------------------------------------------------------------
/website/src/demos/sizing.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Rnd } from 'react-rnd'
3 | import CodeBlock from '@theme/CodeBlock'
4 | import './sizing.css'
5 |
6 | const Col = ({ basis, grow, shrink, minWidth, maxWidth }) => {
7 | return (
8 |
20 |
21 | {JSON.stringify(
22 | { basis, grow, shrink, minWidth, maxWidth },
23 | null,
24 | 2
25 | ).replace(/"/g, '')}
26 |
27 |
28 | )
29 | }
30 |
31 | export const ColumnsSizing = ({ columns }) => {
32 | return (
33 |
39 |
50 |
60 |
67 | {columns.map((column, i) => (
68 |
69 | ))}
70 |
71 |
72 |
31 | (
67 |
73 | ),
74 | }}
75 | />
76 |
77 | )
78 | }
79 |
--------------------------------------------------------------------------------
/website/src/demos/styleGenerator.css:
--------------------------------------------------------------------------------
1 | .generator-form label {
2 | padding-right: 10px;
3 | color: #7f7f7f;
4 | }
5 |
6 | .generator-form label.active {
7 | color: #000000;
8 | }
9 |
10 | .generator-form input {
11 | border: none;
12 | background: #f8f8f8;
13 | padding: 5px 8px;
14 | min-width: 200px;
15 | font-size: 14px;
16 | }
17 |
18 | .generator-form input:focus {
19 | background: #f1f1f1;
20 | outline: none;
21 | }
22 |
--------------------------------------------------------------------------------
/website/src/demos/styleGenerator.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useState } from 'react'
2 | import {
3 | DynamicDataSheetGrid,
4 | checkboxColumn,
5 | textColumn,
6 | dateColumn,
7 | intColumn,
8 | floatColumn,
9 | percentColumn,
10 | keyColumn,
11 | } from 'react-datasheet-grid'
12 | import faker from 'faker'
13 | import CodeBlock from '@theme/CodeBlock'
14 | import './styleGenerator.css'
15 |
16 | const customProps = [
17 | { name: '--dsg-border-color', defaultValue: '#e8ebed', type: 'color' },
18 | {
19 | name: '--dsg-selection-border-color',
20 | defaultValue: 'rgb(69, 128, 230)',
21 | type: 'color',
22 | },
23 | { name: '--dsg-selection-border-radius', defaultValue: '2px', type: 'size' },
24 | { name: '--dsg-selection-border-width', defaultValue: '2px', type: 'size' },
25 | {
26 | name: '--dsg-selection-background-color',
27 | defaultValue: 'rgba(69, 128, 230, 0.04)',
28 | type: 'color',
29 | },
30 | {
31 | name: '--dsg-selection-disabled-border-color',
32 | defaultValue: '#9DA6AB',
33 | type: 'color',
34 | },
35 | {
36 | name: '--dsg-selection-disabled-background-color',
37 | defaultValue: 'rgba(0, 0, 0, 0.04)',
38 | type: 'color',
39 | },
40 | { name: '--dsg-corner-indicator-width', defaultValue: '10px', type: 'size' },
41 | {
42 | name: '--dsg-header-text-color',
43 | defaultValue: 'rgb(157, 166, 171)',
44 | type: 'color',
45 | },
46 | {
47 | name: '--dsg-header-active-text-color',
48 | defaultValue: 'black',
49 | type: 'color',
50 | },
51 | { name: '--dsg-cell-background-color', defaultValue: 'white', type: 'color' },
52 | {
53 | name: '--dsg-cell-disabled-background-color',
54 | defaultValue: 'rgb(250, 250, 250)',
55 | type: 'color',
56 | },
57 | { name: '--dsg-transition-duration', defaultValue: '.1s', type: 'duration' },
58 | {
59 | name: '--dsg-expand-rows-indicator-width',
60 | defaultValue: '10px',
61 | type: 'size',
62 | },
63 | { name: '--dsg-scroll-shadow-width', defaultValue: '7px', type: 'size' },
64 | {
65 | name: '--dsg-scroll-shadow-color',
66 | defaultValue: 'rgba(0,0,0,.2)',
67 | type: 'color',
68 | },
69 | ]
70 |
71 | export default () => {
72 | const [cpValues, setCpValues] = useState({})
73 | const [data, setData] = useState(() =>
74 | new Array(50).fill(0).map(() => ({
75 | active: faker.datatype.boolean(),
76 | firstName: faker.name.firstName(),
77 | lastName: faker.name.lastName(),
78 | job: faker.name.jobTitle(),
79 | area: faker.name.jobArea(),
80 | int: faker.datatype.number(1100),
81 | float: faker.datatype.number(1000) / 100,
82 | percent: faker.datatype.number(100) / 100,
83 | date: new Date(faker.date.past()),
84 | }))
85 | )
86 |
87 | const columns = useMemo(
88 | () => [
89 | { ...keyColumn('active', checkboxColumn), title: 'Active' },
90 | {
91 | ...keyColumn('firstName', textColumn),
92 | title: 'First name',
93 | minWidth: 150,
94 | },
95 | {
96 | ...keyColumn('lastName', textColumn),
97 | title: 'Last name',
98 | minWidth: 150,
99 | },
100 | {
101 | ...keyColumn('int', intColumn),
102 | title: 'Integer',
103 | minWidth: 150,
104 | disabled: ({ rowData }) => rowData.active,
105 | },
106 | {
107 | ...keyColumn('float', floatColumn),
108 | title: 'Float',
109 | minWidth: 150,
110 | disabled: true,
111 | },
112 | {
113 | ...keyColumn('percent', percentColumn),
114 | title: 'Percentage',
115 | minWidth: 150,
116 | },
117 | { ...keyColumn('date', dateColumn), title: 'Date' },
118 | {
119 | ...keyColumn('job', textColumn),
120 | title: 'Job',
121 | minWidth: 250,
122 | },
123 | {
124 | ...keyColumn('area', textColumn),
125 | title: 'Job area',
126 | minWidth: 150,
127 | },
128 | ],
129 | []
130 | )
131 |
132 | return (
133 | <>
134 |
135 | {customProps.map(({ name, defaultValue }) => (
136 |
137 |
140 |
145 | setCpValues({
146 | ...cpValues,
147 | [name]: e.target.value || undefined,
148 | })
149 | }
150 | />
151 |
152 | ))}
153 |
23 |
33 |
34 | {JSON.stringify(data.slice(0, 5), null, 2)}
35 |
36 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/website/src/demos/uniqueIds.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react'
2 | import { DataSheetGrid, keyColumn, textColumn } from 'react-datasheet-grid'
3 | import faker from 'faker'
4 |
5 | // eslint-disable-next-line react/display-name
6 | export default () => {
7 | const counter = useRef(1)
8 | const genId = () => counter.current++
9 |
10 | const [data, setData] = useState(() =>
11 | new Array(5).fill(0).map(() => ({
12 | id: genId(),
13 | firstName: faker.name.firstName(),
14 | lastName: faker.name.lastName(),
15 | }))
16 | )
17 |
18 | return (
19 |
20 | ({ id: genId() })}
24 | duplicateRow={({ rowData }) => ({ ...rowData, id: genId() })}
25 | columns={[
26 | {
27 | ...keyColumn('id', textColumn),
28 | title: 'ID',
29 | disabled: true,
30 | isCellEmpty: () => true,
31 | },
32 | { ...keyColumn('firstName', textColumn), title: 'First name' },
33 | { ...keyColumn('lastName', textColumn), title: 'Last name' },
34 | ]}
35 | />
36 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/website/src/demos/xxl.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react'
2 | import {
3 | DataSheetGrid,
4 | checkboxColumn,
5 | textColumn,
6 | dateColumn,
7 | intColumn,
8 | floatColumn,
9 | percentColumn,
10 | keyColumn,
11 | DataSheetGridRef,
12 | } from 'react-datasheet-grid'
13 | import faker from 'faker'
14 |
15 | export default () => {
16 | const [data, setData] = useState(() =>
17 | new Array(100000).fill(0).map(() => ({
18 | active: faker.datatype.boolean(),
19 | firstName: faker.name.firstName(),
20 | lastName: faker.name.lastName(),
21 | job: faker.name.jobTitle(),
22 | area: faker.name.jobArea(),
23 | int: faker.datatype.number(1100),
24 | float: faker.datatype.number(1000) / 100,
25 | percent: faker.datatype.number(100) / 100,
26 | date: new Date(faker.date.past()),
27 | }))
28 | )
29 | const ref = useRef()
30 |
31 | useEffect(() => {
32 | setTimeout(() => {
33 | ref.current.setActiveCell({ col: 1, row: 99999 })
34 | setTimeout(() => {
35 | ref.current.setActiveCell({ col: 1, row: 99998 })
36 | }, 0)
37 | }, 0)
38 | }, [])
39 |
40 | return (
41 |
80 | )
81 | }
82 |
--------------------------------------------------------------------------------
/website/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 |
3 | /**
4 | * CSS files with the .module.css suffix will be treated as CSS modules
5 | * and scoped locally.
6 | */
7 |
8 | .heroBanner {
9 | padding: 4rem 0;
10 | text-align: center;
11 | position: relative;
12 | overflow: hidden;
13 | background: #303846;
14 | color: white;
15 | }
16 |
17 | @media screen and (max-width: 966px) {
18 | .heroBanner {
19 | padding: 2rem;
20 | }
21 | }
22 |
23 | .buttons {
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | }
28 |
29 | .feature {
30 | padding: 60px 20px;
31 | font-size: 17px;
32 | }
33 |
34 | .feature figure {
35 | display: flex;
36 | justify-content: center;
37 | }
38 |
39 | .feature h2 {
40 | font-size: 25px;
41 | }
42 |
43 | .feature:nth-child(odd) {
44 | background: #F7F7F7;
45 | }
46 |
47 | html[data-theme='dark'] .feature:nth-child(odd) {
48 | background: #202223;
49 | }
50 |
51 | .feature:nth-child(odd) figure {
52 | order: 1;
53 | }
54 |
55 | .feature > div {
56 | display: flex;
57 | align-items: center;
58 | margin: 0 auto;
59 | max-width: 900px;
60 | }
61 |
62 | .feature > div > * {
63 | flex: 1;
64 | padding: 0 20px;
65 | margin: 0;
66 | }
67 |
68 | .partner {
69 | display: flex;
70 | align-items: center;
71 | max-width: 800px;
72 | margin: 40px auto;
73 | gap: 50px;
74 | position: relative;
75 | background: white;
76 | border-radius: 20px;
77 | padding: 30px;
78 | }
79 |
80 | .partner:before {
81 | content: "";
82 | z-index: -1;
83 | position: absolute;
84 | top: 0;
85 | right: 0;
86 | bottom: 0;
87 | left: 0;
88 | background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
89 | transform: translate3d(0px, 10px, 0) scale(0.95);
90 | filter: blur(20px);
91 | opacity: 0.7;
92 | transition: opacity 0.3s;
93 | border-radius: inherit;
94 | }
95 |
96 | /*
97 | * Prevents issues when the parent creates a
98 | * stacking context. (For example, using the transform
99 | * property )
100 | */
101 | .partner::after {
102 | content: "";
103 | z-index: -1;
104 | position: absolute;
105 | top: 0;
106 | right: 0;
107 | bottom: 0;
108 | left: 0;
109 | background: inherit;
110 | border-radius: inherit;
111 | }
112 |
113 |
114 | .partner figure {
115 | padding: 0;
116 | margin: 0;
117 | flex: 1;
118 | display: flex;
119 | align-items: center;
120 | justify-content: center;
121 | }
122 |
123 | .partner aside {
124 | padding: 0;
125 | margin: 0;
126 | flex: 2;
127 | }
128 |
129 | .partner figure > a {
130 | color: #252525;
131 | }
132 |
133 | .partner figure > a > div {
134 | left: 62%;
135 | background: #252525;
136 | transition: all .3s cubic-bezier(.47,1.64,.41,.8);
137 | }
138 |
139 | .partner figure > a:hover > div {
140 | left: 36%;
141 | }
--------------------------------------------------------------------------------
/website/src/pages/markdown-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Markdown page example
3 | ---
4 |
5 | # Markdown page example
6 |
7 | You don't need React to write simple standalone pages.
8 |
--------------------------------------------------------------------------------
/website/src/pages/style.css:
--------------------------------------------------------------------------------
1 | .react-rotating-text-cursor {
2 | animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s infinite;
3 | }
4 |
5 | @keyframes blinking-cursor {
6 | 0% {
7 | opacity: 0;
8 | }
9 | 50% {
10 | opacity: 1;
11 | }
12 | 100% {
13 | opacity: 0;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/website/static/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nick-keller/react-datasheet-grid/779bd227711afa89ee4901cee5de3bb0082dac4b/website/static/.nojekyll
--------------------------------------------------------------------------------
/website/static/img/copy-paste.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nick-keller/react-datasheet-grid/779bd227711afa89ee4901cee5de3bb0082dac4b/website/static/img/copy-paste.gif
--------------------------------------------------------------------------------
/website/static/img/custom-widgets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nick-keller/react-datasheet-grid/779bd227711afa89ee4901cee5de3bb0082dac4b/website/static/img/custom-widgets.png
--------------------------------------------------------------------------------
/website/static/img/expand-selection.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nick-keller/react-datasheet-grid/779bd227711afa89ee4901cee5de3bb0082dac4b/website/static/img/expand-selection.gif
--------------------------------------------------------------------------------
/website/static/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nick-keller/react-datasheet-grid/779bd227711afa89ee4901cee5de3bb0082dac4b/website/static/img/favicon.ico
--------------------------------------------------------------------------------
/website/static/img/logos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nick-keller/react-datasheet-grid/779bd227711afa89ee4901cee5de3bb0082dac4b/website/static/img/logos.png
--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/docusaurus/tsconfig.json",
3 | "include": ["src/"],
4 | "downlevelIteration": true
5 | }
6 |
--------------------------------------------------------------------------------