simple-table-core 0.6.4 → 0.6.5
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/README.md +36 -50
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,43 +37,13 @@ Check out the live demo on CodeSandbox: <a href="https://codesandbox.io/p/sandbo
|
|
|
37
37
|
|
|
38
38
|
```bash
|
|
39
39
|
# npm
|
|
40
|
-
npm install simple-table-
|
|
40
|
+
npm install simple-table-core
|
|
41
41
|
|
|
42
42
|
# yarn
|
|
43
|
-
yarn add simple-table-
|
|
43
|
+
yarn add simple-table-core
|
|
44
44
|
|
|
45
45
|
# pnpm
|
|
46
|
-
pnpm add simple-table-
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Quick Start
|
|
50
|
-
|
|
51
|
-
```jsx
|
|
52
|
-
import React, { useState } from "react";
|
|
53
|
-
import SimpleTable from "simple-table-react";
|
|
54
|
-
import "simple-table-react/dist/styles.css";
|
|
55
|
-
|
|
56
|
-
const App = () => {
|
|
57
|
-
const [rows, setRows] = useState([
|
|
58
|
-
{ rowMeta: { rowId: 0 }, rowData: { name: "John", age: 25 } },
|
|
59
|
-
{ rowMeta: { rowId: 1 }, rowData: { name: "Jane", age: 30 } },
|
|
60
|
-
]);
|
|
61
|
-
|
|
62
|
-
const headers = [
|
|
63
|
-
{ accessor: "name", label: "Name", width: 200 },
|
|
64
|
-
{ accessor: "age", label: "Age", width: 100 },
|
|
65
|
-
];
|
|
66
|
-
|
|
67
|
-
const handleCellChange = ({ accessor, newValue, originalRowIndex }) => {
|
|
68
|
-
const updatedRows = [...rows];
|
|
69
|
-
updatedRows[originalRowIndex].rowData[accessor] = newValue;
|
|
70
|
-
setRows(updatedRows);
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
return <SimpleTable defaultHeaders={headers} rows={rows} onCellChange={handleCellChange} selectableCells />;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export default App;
|
|
46
|
+
pnpm add simple-table-core
|
|
77
47
|
```
|
|
78
48
|
|
|
79
49
|
## Props
|
|
@@ -125,8 +95,8 @@ All styles for the Simple Table are customizable through CSS variables. You can
|
|
|
125
95
|
You can override the following CSS variables to customize the appearance of the table:
|
|
126
96
|
|
|
127
97
|
```css
|
|
98
|
+
/* light theme */
|
|
128
99
|
:root {
|
|
129
|
-
/* Base variables */
|
|
130
100
|
--st-border-radius: 4px;
|
|
131
101
|
--st-border-width: 1px;
|
|
132
102
|
--st-cell-padding: 8px;
|
|
@@ -134,26 +104,42 @@ You can override the following CSS variables to customize the appearance of the
|
|
|
134
104
|
--st-font-weight-normal: 400;
|
|
135
105
|
--st-font-weight-bold: 600;
|
|
136
106
|
--st-transition-duration: 0.2s;
|
|
137
|
-
--st-transition-ease: ease
|
|
107
|
+
--st-transition-ease: ease;
|
|
138
108
|
--st-opacity-disabled: 0.5;
|
|
139
109
|
--st-spacing-small: 4px;
|
|
140
110
|
--st-spacing-medium: 8px;
|
|
141
111
|
--st-spacing-large: 16px;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
--st-
|
|
146
|
-
--st-background-color:
|
|
147
|
-
--st-
|
|
148
|
-
--st-
|
|
149
|
-
--st-
|
|
150
|
-
--st-
|
|
151
|
-
--st-
|
|
152
|
-
--st-
|
|
153
|
-
--st-
|
|
154
|
-
--st-
|
|
155
|
-
--st-
|
|
156
|
-
--st-
|
|
112
|
+
--st-scrollbar-bg-color: transparent;
|
|
113
|
+
--st-scrollbar-thumb-color: var(--slate-200);
|
|
114
|
+
|
|
115
|
+
--st-border-color: var(--gray-300);
|
|
116
|
+
--st-odd-row-background-color: var(--white);
|
|
117
|
+
--st-even-row-background-color: var(--white);
|
|
118
|
+
--st-header-background-color: var(--white);
|
|
119
|
+
--st-dragging-background-color: var(--gray-200);
|
|
120
|
+
--st-selected-cell-background-color: var(--blue-200);
|
|
121
|
+
--st-selected-first-cell-background-color: var(--blue-200);
|
|
122
|
+
--st-footer-background-color: var(--white);
|
|
123
|
+
--st-cell-color: var(--gray-800);
|
|
124
|
+
--st-cell-odd-row-color: var(--gray-700);
|
|
125
|
+
--st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px -1px rgba(0, 0, 0, 0.05);
|
|
126
|
+
--st-selected-cell-color: var(--gray-900);
|
|
127
|
+
--st-selected-first-cell-color: var(--gray-900);
|
|
128
|
+
--st-resize-handle-color: var(--blue-300);
|
|
129
|
+
--st-separator-border-color: var(--slate-100);
|
|
130
|
+
--st-last-group-row-separator-border-color: var(--slate-300);
|
|
131
|
+
--st-selected-border-top-color: var(--blue-600);
|
|
132
|
+
--st-selected-border-bottom-color: var(--blue-600);
|
|
133
|
+
--st-selected-border-left-color: var(--blue-600);
|
|
134
|
+
--st-selected-border-right-color: var(--blue-600);
|
|
135
|
+
--st-checkbox-checked-background-color: var(--blue-600);
|
|
136
|
+
--st-checkbox-checked-border-color: var(--blue-600);
|
|
137
|
+
--st-column-editor-background-color: var(--white);
|
|
138
|
+
--st-column-editor-popout-background-color: var(--white);
|
|
139
|
+
--st-button-hover-background-color: var(--gray-200);
|
|
140
|
+
--st-button-active-background-color: var(--blue-800);
|
|
141
|
+
--st-font-family: "Roboto", sans-serif;
|
|
142
|
+
--st-editable-cell-focus-border-color: var(--blue-600);
|
|
157
143
|
}
|
|
158
144
|
```
|
|
159
145
|
|