@reactorui/datagrid 1.0.15 → 1.0.17
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
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# @reactorui/datagrid
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@reactorui/datagrid)
|
|
4
|
+
[](https://www.npmjs.com/package/@reactorui/datagrid)
|
|
5
|
+
[](https://github.com/your-org/datagrid/blob/main/LICENSE)
|
|
6
|
+
|
|
3
7
|
A high-performance, feature-rich React data grid component with TypeScript support, server-side integration, pagination and advanced filtering capabilities.
|
|
4
8
|
|
|
5
9
|
## 🖼️ Screenshots
|
|
@@ -771,3 +775,8 @@ Open a Pull Request
|
|
|
771
775
|
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
772
776
|
|
|
773
777
|
Made with ❤️ by ReactorUI
|
|
778
|
+
|
|
779
|
+
## Author
|
|
780
|
+
|
|
781
|
+
**Name:** Miracle
|
|
782
|
+
**GitHub:** [@code-Miracle49](https://github.com/code-Miracle49)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAU,MAAM,aAAa,CAAC;AAOpD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,mfAsC9D,aAAa,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAU,MAAM,aAAa,CAAC;AAOpD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,mfAsC9D,aAAa,CAAC,CAAC,CAAC,4CAiUlB,CAAC"}
|
|
@@ -95,7 +95,7 @@ onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, o
|
|
|
95
95
|
if (error) {
|
|
96
96
|
return (_jsx("div", { className: `${theme.container} ${className}`, ...rest, children: _jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-red-600 dark:text-red-400 mb-2", children: "Error loading data" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: error }), _jsx("button", { onClick: handleRefresh, className: theme.button, children: "Try Again" })] }) }));
|
|
97
97
|
}
|
|
98
|
-
return (_jsxs("div", { className: `${theme.container} ${className}`, ...rest, children: [enableFilters && (_jsx("div", { className: "p-4 pb-2", children:
|
|
98
|
+
return (_jsxs("div", { className: `${theme.container} ${className}`, ...rest, children: [enableFilters && (_jsx("div", { className: "p-4 pb-2", children: _jsx("div", { className: "flex justify-between items-start gap-4", children: _jsx("div", { className: "flex-1", children: _jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onAddFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) }) }) })), _jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), className: "px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "entries" })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [enableSearch && (_jsx("div", { className: "w-64", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: loading, className: theme.searchInput }) })), enableRefresh && (_jsx("button", { onClick: handleRefresh, disabled: loading, title: loading ? 'Loading...' : 'Refresh data', className: "px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-150 flex items-center justify-center", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })), enableDelete && enableSelection && (_jsxs("button", { onClick: handleDelete, disabled: selectedRows.size === 0, title: selectedRows.size === 0
|
|
99
99
|
? 'Select rows to delete'
|
|
100
100
|
: `Delete ${selectedRows.size} selected item${selectedRows.size === 1 ? '' : 's'}`, className: `px-3 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-150 flex items-center gap-1 ${selectedRows.size === 0
|
|
101
101
|
? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export const SearchInput = ({ value, onChange, placeholder = 'Search...', disabled = false, className = '', }) => {
|
|
3
3
|
return (_jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, className: `
|
|
4
|
-
w-full px-3 py-2 pl-10 border border-gray-300
|
|
4
|
+
w-full px-3 py-2 pl-10 border border-gray-300 text-sm
|
|
5
5
|
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
|
6
6
|
disabled:bg-gray-50 disabled:text-gray-500
|
|
7
7
|
${className}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reactorui/datagrid",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"description": "High-performance React data grid with TypeScript support, server-side integration, and continuation token pagination",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|