mig-schema-table 5.0.17 → 5.0.18
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 +92 -12
- package/dist/mig-schema-table.d.ts +1 -0
- package/dist/mig-schema-table.es.js +801 -798
- package/dist/mig-schema-table.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -70,22 +70,102 @@ const Table = () => {
|
|
|
70
70
|
|
|
71
71
|
## Component Props
|
|
72
72
|
|
|
73
|
-
| Prop
|
|
74
|
-
|
|
|
75
|
-
| schema
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
73
|
+
| Prop | Type | Description |
|
|
74
|
+
| --------------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
75
|
+
| schema | `SchemaObject` | OpenAPI schema object used to render the columns/fields dynamically. **Required**. |
|
|
76
|
+
| data | `T[] \| (getDataProps) => Promise<T[]>` | Row data array, or an async function that resolves the data based on the current table state. **Required**. |
|
|
77
|
+
| config | `{ [keyName: string]: IColumnConfig }` | Per-column UI configuration (see [Config](#config)). |
|
|
78
|
+
| width | `number` | Width of the table. |
|
|
79
|
+
| maxHeight | `number \| "100%"` | Maximum height of the table. |
|
|
80
|
+
| rowHeight | `number` | Height of a single row (default `36`). |
|
|
81
|
+
| style | `React.CSSProperties` | Custom inline styles for the table container. |
|
|
82
|
+
| tableTitle | `string` | Custom title shown for the table. |
|
|
83
|
+
| searchPlaceholder | `string` | Placeholder text for the search input. |
|
|
84
|
+
| isSearchable | `boolean` | If `true`, the search field is shown (default `true`). |
|
|
85
|
+
| isSortable | `boolean` | If `true`, columns can be sorted (default `true`). |
|
|
86
|
+
| isColumnFilterable | `boolean` | If `true`, per-column filtering is enabled (default `true`). |
|
|
87
|
+
| isResizable | `boolean` | If `true`, columns can be resized (default `true`). |
|
|
88
|
+
| isExportable | `boolean` | If `true`, the export action is available (default `true`). |
|
|
89
|
+
| enableAutoFocus | `boolean` | If `true`, the search input is auto-focused (default `true`). |
|
|
90
|
+
| enableRowCounter | `boolean` | If `true`, the row counter is displayed (default `true`). |
|
|
91
|
+
| autoRender | `boolean` | If `true`, renders automatically without an explicit refresh. |
|
|
92
|
+
| defaultColumnFilters | `IColumnFilterMap` | Initial column filter values. |
|
|
93
|
+
| defaultSortColumn | `string` | Column that is sorted by default. |
|
|
94
|
+
| defaultSortAsc | `boolean` | Default sort direction (default `false`). |
|
|
95
|
+
| useFilterStateHash | `boolean` | If `true`, the filter/sort state is persisted in the URL hash. |
|
|
96
|
+
| settingsStorageKey | `string` | Storage key used to persist column settings (widths/order). |
|
|
97
|
+
| displayTimezone | `"Europe/Amsterdam" \| "Asia/Jakarta"` | Timezone used to display date/time values. |
|
|
98
|
+
| checkedIndexes | `number[]` | Controlled list of checked row indexes. |
|
|
99
|
+
| disabledCheckedIndexes | `number[]` | Row indexes whose checkbox is disabled. |
|
|
100
|
+
| setCheckedIndexes | `Dispatch<SetStateAction<number[]>>` | Setter used to update the checked row indexes. |
|
|
101
|
+
| onRowClick | `(rowData, dataIndex, event) => void` | Called when a row is clicked. |
|
|
102
|
+
| onRowDoubleClick | `(rowData, dataIndex, event) => void` | Called when a row is double-clicked. |
|
|
103
|
+
| onSearchEnter | `(searchQuery: string) => void` | Called when Enter is pressed in the search input. |
|
|
104
|
+
| onTableDataStateChange | `(newTableDataState: ITableDataState) => void` | Called whenever the table data state (search/filter/sort) changes. |
|
|
105
|
+
| onFilteredSortedDataChange | `(filteredSortedData: IRenderData[] \| undefined) => void` | Reactive callback invoked whenever the filtered/sorted data changes. Preferred over the imperative `getFilteredSortedData` ref handle. |
|
|
106
|
+
| getRowClassName | `(rowData, dataIndex, filteredSortedData) => string` | Returns a custom CSS class name for a row. |
|
|
107
|
+
| getRowSelected | `(rowData, dataIndex) => boolean` | Returns whether a row should be rendered as selected. |
|
|
108
|
+
| getSearchQueryFilterResult | `(rowData, searchQuery) => boolean` | Custom search matcher used instead of the default search behavior. |
|
|
109
|
+
| translate | `(key, ...args) => string` | Custom translation function for UI labels. |
|
|
110
|
+
| Heading | `React.ComponentType` | Custom heading/list component override. |
|
|
111
|
+
| CustomSearchInput | `React.ComponentType<InputHTMLAttributes<HTMLInputElement>>` | Custom component to render the search input. |
|
|
112
|
+
| CustomElement | `React.ComponentType<ICustomElementProps>` | Custom element rendered with access to the current `renderData`. |
|
|
113
|
+
| customElementProps | `{ [controlProp: string]: unknown }` | Extra props passed to `CustomElement`. |
|
|
114
|
+
| infiniteLoaderRef | `React.RefObject<InfiniteLoader>` | Ref to the underlying `react-window-infinite-loader` instance. |
|
|
115
|
+
| loadMoreItems | `(startIndex, stopIndex) => void \| Promise<void>` | Called to load more items for infinite loading. |
|
|
116
|
+
| itemCount | `number` | Total number of items, used together with `loadMoreItems`. |
|
|
117
|
+
|
|
118
|
+
### Ref handle (`ISchemaTable`)
|
|
119
|
+
|
|
120
|
+
Attach a `ref` to access imperative methods:
|
|
121
|
+
|
|
122
|
+
| Method | Type | Description |
|
|
123
|
+
| ---------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------- |
|
|
124
|
+
| getFilteredSortedData | `() => IRenderData[] \| undefined` | Returns the current filtered/sorted data. Prefer the reactive `onFilteredSortedDataChange` prop. |
|
|
125
|
+
| scrollToIndex | `(index: number) => void` | Scrolls the table to the row at the given index. |
|
|
126
|
+
|
|
127
|
+
```typescript jsx
|
|
128
|
+
const tableRef = React.useRef<ISchemaTable>(null);
|
|
129
|
+
|
|
130
|
+
<SchemaTable ref={tableRef} schema={userSchema} data={users} />;
|
|
131
|
+
|
|
132
|
+
// Imperative access
|
|
133
|
+
tableRef.current?.scrollToIndex(5);
|
|
134
|
+
|
|
135
|
+
// Reactive access (preferred)
|
|
136
|
+
<SchemaTable
|
|
137
|
+
schema={userSchema}
|
|
138
|
+
data={users}
|
|
139
|
+
onFilteredSortedDataChange={setFilteredSortedData}
|
|
140
|
+
/>;
|
|
141
|
+
```
|
|
84
142
|
|
|
85
143
|
## Config
|
|
86
144
|
|
|
87
|
-
|
|
145
|
+
You can import the config type (`IColumnConfig`) and configure each column individually:
|
|
88
146
|
|
|
89
147
|
```ts
|
|
90
148
|
const config: { [keyName: string]: IColumnConfig } = {};
|
|
91
149
|
```
|
|
150
|
+
|
|
151
|
+
| Option | Type | Description |
|
|
152
|
+
| --------------- | ----------------------------------------------------------- | -------------------------------------------------------------------- |
|
|
153
|
+
| title | `string \| React.ReactElement` | Custom column header title. |
|
|
154
|
+
| hidden | `boolean` | Hides the column when `true`. |
|
|
155
|
+
| order | `number` | Controls the column order. |
|
|
156
|
+
| width | `number` | Fixed column width. |
|
|
157
|
+
| align | `"start" \| "center" \| "end"` | Horizontal alignment of the cell content. |
|
|
158
|
+
| hoverTitle | `string` | Tooltip text shown on hover of the column header. |
|
|
159
|
+
| dateFormat | `string` | Custom date format for date columns. |
|
|
160
|
+
| timezone | `"Asia/Jakarta" \| "Europe/Amsterdam"` | Timezone used for this column's date/time values. |
|
|
161
|
+
| showTimezones | `false` | Disables timezone display for the column. |
|
|
162
|
+
| isSortable | `boolean` | Enables/disables sorting for the column. |
|
|
163
|
+
| sortByValue | `boolean` | Sort using the raw value instead of the rendered string. |
|
|
164
|
+
| defaultSortDesc | `boolean` | Sort descending by default when this column is first sorted. |
|
|
165
|
+
| sort | `(a, b, sortAsc) => number` | Custom sort comparator for the column. |
|
|
166
|
+
| isFilterable | `boolean` | Enables/disables filtering for the column. |
|
|
167
|
+
| filter | `(rowData, columnFilterValue) => boolean` | Custom filter predicate for the column. |
|
|
168
|
+
| FilterMenu | `React.ComponentType<IFilterMenuComponentProps>` | Custom filter menu component for the column. |
|
|
169
|
+
| renderData | `(rowData, dataIndex) => string` | Returns the string value used to render the cell. |
|
|
170
|
+
| TdBody | `React.ComponentType<ITdBodyProps<T>>` | Custom component used to render the cell body. |
|
|
171
|
+
| tdBodyProps | `Record<string, unknown>` | Extra props passed to the `TdBody` component. |
|
|
@@ -110,6 +110,7 @@ export declare interface ISchemaTableProps<T> {
|
|
|
110
110
|
onRowDoubleClick?: (rowData: T, dataIndex: number, event: default_2.MouseEvent) => void;
|
|
111
111
|
onSearchEnter?: (searchQuery: string) => void;
|
|
112
112
|
onTableDataStateChange?: (newTableDataState: ITableDataState) => void;
|
|
113
|
+
onFilteredSortedDataChange?: (filteredSortedData: IRenderData[] | undefined) => void;
|
|
113
114
|
rowHeight?: number;
|
|
114
115
|
schema: oas31.SchemaObject;
|
|
115
116
|
searchPlaceholder?: string;
|