react-live-data-table 1.0.14 → 1.0.16

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/ReactDataTable.jsx +47 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-live-data-table",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "Your React component package with Tailwind",
5
5
  "main": "src/index.js",
6
6
  "module": "dist/index.esm.js",
package/src/ReactDataTable.jsx CHANGED
@@ -177,17 +177,53 @@ function ReactDataTable({
177
177
  size: 50,
178
178
  minWidth: 50,
179
179
  textAlign: "center",
180
- header: ({ data }) => (
181
- <div className="flex items-center justify-center h-[40px]">
182
- {showSelectAllCheckbox && <input
183
- id={data.id}
184
- type="checkbox"
185
- className='bg-gray-700 rounded-4 border-gray-200 text-blue-400 focus:ring-0 focus:ring-white'
186
- checked={Object.keys(selectedRows).length > 0 && data.every(row => selectedRows[row.id])}
187
- onChange={(e) => handleSelectAll(e.target.checked, flatData)}
188
- />}
189
- </div>
190
- ),
180
+ header: ({ data }) => {
181
+ const allSelected = flatData.length > 0 && flatData.every(row => selectedRows[row.id]);
182
+ const someSelected = flatData.some(row => selectedRows[row.id]) && !allSelected;
183
+
184
+
185
+ return (
186
+ <div className="flex items-center justify-center h-[40px]">
187
+ {showSelectAllCheckbox && (
188
+ <div className="relative">
189
+ <input
190
+ id={data.id}
191
+ type="checkbox"
192
+ className='bg-gray-700 rounded-4 border-gray-200 text-blue-400 focus:ring-0 focus:ring-white'
193
+ checked={allSelected}
194
+ onChange={(e) => handleSelectAll(e.target.checked, flatData)}
195
+ />
196
+ {allSelected ? (
197
+ <svg
198
+ className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none text-white"
199
+ viewBox="0 0 20 20"
200
+ fill="currentColor"
201
+ >
202
+ <path
203
+ fillRule="evenodd"
204
+ d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
205
+ clipRule="evenodd"
206
+ />
207
+ </svg>
208
+ ) : (
209
+ someSelected &&
210
+ <svg
211
+ className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none "
212
+ viewBox="0 0 20 20"
213
+ fill="currentColor"
214
+ >
215
+ <path
216
+ fillRule="evenodd"
217
+ d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
218
+ clipRule="evenodd"
219
+ />
220
+ </svg>
221
+ )}
222
+ </div>
223
+ )}
224
+ </div>
225
+ );
226
+ },
191
227
  cell: ({ row }) => {
192
228
  return (
193
229
  <div className="flex items-center justify-center h-[40px]" onClick={(e) => e.stopPropagation()}>