@pythia-software/query-table-ui 0.1.0 → 0.2.0
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 +27 -1
- package/dist/index.d.ts +7 -0
- package/dist/index.js +415 -132
- package/dist/index.js.map +1 -1
- package/dist/theme.css +522 -4
- package/dist/theme.css.map +1 -1
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ and selection toolbar.
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install @pythia-software/query-table-core @pythia-software/query-table-react @pythia-software/query-table-ui react
|
|
10
|
+
npm install @pythia-software/query-table-core @pythia-software/query-table-react @pythia-software/query-table-ui react react-dom
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Use
|
|
@@ -40,9 +40,35 @@ export function OrdersTable({ table, schema }) {
|
|
|
40
40
|
}
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
`DataTable` virtualizes body rows and uses a 600px maximum-height scroll
|
|
44
|
+
viewport by default. Set `maxHeight` to match the surrounding layout;
|
|
45
|
+
`estimateRowHeight` (37px by default) and `overscan` (8 rows) are available for
|
|
46
|
+
unusually sized or expensive custom row renderers. Visible rows are measured,
|
|
47
|
+
so the estimate does not require every row to have a fixed height.
|
|
48
|
+
|
|
43
49
|
The bundled `link` renderer allows only HTTP(S), email, telephone, relative,
|
|
44
50
|
and fragment URLs. Applications remain responsible for validating URLs emitted
|
|
45
51
|
by custom renderers.
|
|
46
52
|
|
|
53
|
+
The query builder's **Share** button copies a URL containing the complete
|
|
54
|
+
current query, including a saved default query. Configure `useQueryTable` with
|
|
55
|
+
`syncUrl: true` so recipients load shared query URLs. Query tokens are encoded,
|
|
56
|
+
not encrypted, and may contain raw filter values.
|
|
57
|
+
|
|
58
|
+
## Mobile behavior
|
|
59
|
+
|
|
60
|
+
The bundled theme keeps the table as a horizontally scrollable grid on narrow
|
|
61
|
+
screens so columns remain comparable. It adds a scroll cue, touch-sized query
|
|
62
|
+
controls, button-based reordering alongside desktop drag-and-drop, sticky row
|
|
63
|
+
selection, single-column metric cards, and bottom-sheet menus and dialogs. Keep
|
|
64
|
+
the standard viewport meta tag in the host page:
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Applications that omit `theme.css` and use only `classNames` are responsible for
|
|
71
|
+
providing their own responsive and touch-target styles.
|
|
72
|
+
|
|
47
73
|
See the [repository README](https://github.com/Pythia-Software/query-table#readme)
|
|
48
74
|
for customization and backend integration details.
|
package/dist/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ interface TableClassNames {
|
|
|
29
29
|
headerRow?: string;
|
|
30
30
|
th?: string;
|
|
31
31
|
resizeHandle?: string;
|
|
32
|
+
resizeGuide?: string;
|
|
32
33
|
tbody?: string;
|
|
33
34
|
row?: string;
|
|
34
35
|
rowSelected?: string;
|
|
@@ -79,6 +80,12 @@ interface DataTableProps<Row> {
|
|
|
79
80
|
total?: number | null;
|
|
80
81
|
loading?: boolean;
|
|
81
82
|
emptyMessage?: string;
|
|
83
|
+
/** Maximum height of the scroll viewport. Defaults to 600px. */
|
|
84
|
+
maxHeight?: number | string;
|
|
85
|
+
/** Estimated row height in pixels; measured rows replace the estimate. Defaults to 37. */
|
|
86
|
+
estimateRowHeight?: number;
|
|
87
|
+
/** Extra rows rendered above and below the visible range. Defaults to 8. */
|
|
88
|
+
overscan?: number;
|
|
82
89
|
/** Tailwind / bespoke styling slots (Mode B). */
|
|
83
90
|
classNames?: TableClassNames;
|
|
84
91
|
}
|