@tanstack/react-table 8.1.4 → 8.2.2
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/build/cjs/react-table/src/index.js.map +1 -1
- package/build/cjs/table-core/build/esm/index.js +43 -33
- package/build/cjs/table-core/build/esm/index.js.map +1 -1
- package/build/esm/index.js +43 -33
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +18 -18
- package/build/umd/index.development.js +43 -33
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -2
- package/src/index.tsx +10 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n TableOptions,\n TableOptionsResolved,\n RowData,\n createTable,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>\n\n//\n\nexport function flexRender<TProps extends object>(\n Comp: Renderable<TProps>,\n props: TProps\n): React.ReactNode | JSX.Element {\n return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n <Comp {...props} />\n ) : (\n Comp\n )\n}\n\nfunction isReactComponent<TProps>(\n component: unknown\n): component is React.ComponentType<TProps> {\n return (\n isClassComponent(component) ||\n typeof component === 'function' ||\n isExoticComponent(component)\n )\n}\n\nfunction isClassComponent(component: any) {\n return (\n typeof component === 'function' &&\n (() => {\n const proto = Object.getPrototypeOf(component)\n return proto.prototype && proto.prototype.isReactComponent\n })()\n )\n}\n\nfunction isExoticComponent(component: any) {\n return (\n typeof component === 'object' &&\n typeof component.$$typeof === 'symbol' &&\n ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n )\n}\n\nexport function useReactTable<TData extends RowData>(\n options: TableOptions<TData>\n) {\n // Compose in the generic options to the user options\n const resolvedOptions: TableOptionsResolved<TData> = {\n state: {}, // Dummy state\n onStateChange: () => {}, // noop\n renderFallbackValue: null,\n ...options,\n }\n\n // Create a new table and store it in state\n const [tableRef] = React.useState(() => ({\n current: createTable<TData>(resolvedOptions),\n }))\n\n // By default, manage table state here using the table's initial state\n const [state, setState] = React.useState(() => tableRef.current.initialState)\n\n // Compose the default state above with any user state. This will allow the user\n // to only control a subset of the state if desired.\n tableRef.current.setOptions(prev => ({\n ...prev,\n ...options,\n state: {\n ...state,\n ...options.state,\n },\n // Similarly, we'll maintain both our internal state and any user-provided\n // state.\n onStateChange: updater => {\n setState(updater)\n options.onStateChange?.(updater)\n },\n }))\n\n return tableRef.current\n}\n"],"names":["flexRender","Comp","props","isReactComponent","React","component","isClassComponent","isExoticComponent","proto","Object","getPrototypeOf","prototype","$$typeof","includes","description","useReactTable","options","resolvedOptions","state","onStateChange","renderFallbackValue","tableRef","useState","current","createTable","setState","initialState","setOptions","prev","updater"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;AAEO,SAASA,UAAT,CACLC,IADK,EAELC,KAFK,EAG0B;AAC/B,EAAA,OAAO,CAACD,IAAD,GAAQ,IAAR,GAAeE,gBAAgB,CAASF,IAAT,CAAhB,gBACpBG,+BAAC,IAAD,EAAUF,KAAV,CADoB,GAGpBD,IAHF,CAAA;AAKD,CAAA;;AAED,SAASE,gBAAT,CACEE,SADF,EAE4C;AAC1C,EAAA,OACEC,gBAAgB,CAACD,SAAD,CAAhB,IACA,OAAOA,SAAP,KAAqB,UADrB,IAEAE,iBAAiB,CAACF,SAAD,CAHnB,CAAA;AAKD,CAAA;;AAED,SAASC,gBAAT,CAA0BD,SAA1B,EAA0C;AACxC,EAAA,OACE,OAAOA,SAAP,KAAqB,UAArB,IACA,CAAC,MAAM;AACL,IAAA,MAAMG,KAAK,GAAGC,MAAM,CAACC,cAAP,CAAsBL,SAAtB,CAAd,CAAA;IACA,OAAOG,KAAK,CAACG,SAAN,IAAmBH,KAAK,CAACG,SAAN,CAAgBR,gBAA1C,CAAA;AACD,GAHD,GAFF,CAAA;AAOD,CAAA;;AAED,SAASI,iBAAT,CAA2BF,SAA3B,EAA2C;EACzC,OACE,OAAOA,SAAP,KAAqB,QAArB,IACA,OAAOA,SAAS,CAACO,QAAjB,KAA8B,QAD9B,IAEA,CAAC,YAAD,EAAe,mBAAf,CAAA,CAAoCC,QAApC,CAA6CR,SAAS,CAACO,QAAV,CAAmBE,WAAhE,CAHF,CAAA;AAKD,CAAA;;AAEM,SAASC,aAAT,CACLC,OADK,EAEL;AACA;AACA,EAAA,MAAMC,eAA4C,GAAG;AACnDC,IAAAA,KAAK,EAAE,EAD4C;AACxC;IACXC,aAAa,EAAE,MAAM,EAF8B;AAE1B;AACzBC,IAAAA,mBAAmB,EAAE,IAH8B;IAInD,GAAGJ,OAAAA;AAJgD,GAArD,CAFA;;AAUA,EAAA,MAAM,CAACK,QAAD,CAAA,GAAajB,gBAAK,CAACkB,QAAN,CAAe,OAAO;IACvCC,OAAO,EAAEC,iBAAW,CAAQP,eAAR,CAAA;GADY,CAAf,CAAnB,CAVA;;AAeA,EAAA,MAAM,CAACC,KAAD,EAAQO,QAAR,CAAA,GAAoBrB,gBAAK,CAACkB,QAAN,CAAe,MAAMD,QAAQ,CAACE,OAAT,CAAiBG,YAAtC,CAA1B,CAfA;AAkBA;;EACAL,QAAQ,CAACE,OAAT,CAAiBI,UAAjB,CAA4BC,IAAI,KAAK,EACnC,GAAGA,IADgC;AAEnC,IAAA,GAAGZ,OAFgC;IAGnCE,KAAK,EAAE,EACL,GAAGA,KADE;AAEL,MAAA,GAAGF,OAAO,CAACE,KAAAA;KALsB;AAOnC;AACA;IACAC,aAAa,EAAEU,OAAO,IAAI;MACxBJ,QAAQ,CAACI,OAAD,CAAR,CAAA;AACAb,MAAAA,OAAO,CAACG,aAAR,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAH,OAAO,CAACG,aAAR,CAAwBU,OAAxB,CAAA,CAAA;AACD,KAAA;AAZkC,GAAL,CAAhC,CAAA,CAAA;EAeA,OAAOR,QAAQ,CAACE,OAAhB,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2363,7 +2363,12 @@ const textCaseSensitive = (rowA, rowB, columnId) => {
|
|
|
2363
2363
|
};
|
|
2364
2364
|
|
|
2365
2365
|
const datetime = (rowA, rowB, columnId) => {
|
|
2366
|
-
|
|
2366
|
+
const a = rowA.getValue(columnId);
|
|
2367
|
+
const b = rowB.getValue(columnId); // Can handle nullish values
|
|
2368
|
+
// Use > and < because == (and ===) doesn't work with
|
|
2369
|
+
// Date objects (would require calling getTime()).
|
|
2370
|
+
|
|
2371
|
+
return a > b ? 1 : a < b ? -1 : 0;
|
|
2367
2372
|
};
|
|
2368
2373
|
|
|
2369
2374
|
const basic = (rowA, rowB, columnId) => {
|
|
@@ -2524,18 +2529,17 @@ const Sorting = {
|
|
|
2524
2529
|
// }
|
|
2525
2530
|
// this needs to be outside of table.setSorting to be in sync with rerender
|
|
2526
2531
|
const nextSortingOrder = column.getNextSortingOrder();
|
|
2532
|
+
const hasManualValue = typeof desc !== 'undefined' && desc !== null;
|
|
2527
2533
|
table.setSorting(old => {
|
|
2528
|
-
var _table$options$enable, _table$options$enable2;
|
|
2529
|
-
|
|
2530
2534
|
// Find any existing sorting for this column
|
|
2531
2535
|
const existingSorting = old == null ? void 0 : old.find(d => d.id === column.id);
|
|
2532
2536
|
const existingIndex = old == null ? void 0 : old.findIndex(d => d.id === column.id);
|
|
2533
|
-
const hasDescDefined = typeof desc !== 'undefined' && desc !== null;
|
|
2534
2537
|
let newSorting = []; // What should we do with this sort action?
|
|
2535
2538
|
|
|
2536
2539
|
let sortAction;
|
|
2540
|
+
let nextDesc = hasManualValue ? desc : nextSortingOrder === 'desc'; // Multi-mode
|
|
2537
2541
|
|
|
2538
|
-
if (column.getCanMultiSort() && multi) {
|
|
2542
|
+
if (old != null && old.length && column.getCanMultiSort() && multi) {
|
|
2539
2543
|
if (existingSorting) {
|
|
2540
2544
|
sortAction = 'toggle';
|
|
2541
2545
|
} else {
|
|
@@ -2553,63 +2557,71 @@ const Sorting = {
|
|
|
2553
2557
|
} // Handle toggle states that will remove the sorting
|
|
2554
2558
|
|
|
2555
2559
|
|
|
2556
|
-
if (sortAction === 'toggle'
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2560
|
+
if (sortAction === 'toggle') {
|
|
2561
|
+
// If we are "actually" toggling (not a manual set value), should we remove the sorting?
|
|
2562
|
+
if (!hasManualValue) {
|
|
2563
|
+
// Is our intention to remove?
|
|
2564
|
+
if (!nextSortingOrder) {
|
|
2565
|
+
sortAction = 'remove';
|
|
2566
|
+
}
|
|
2567
|
+
}
|
|
2563
2568
|
}
|
|
2564
2569
|
|
|
2565
|
-
if (sortAction === '
|
|
2566
|
-
newSorting = [{
|
|
2567
|
-
id: column.id,
|
|
2568
|
-
desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
|
|
2569
|
-
}];
|
|
2570
|
-
} else if (sortAction === 'add' && old != null && old.length) {
|
|
2570
|
+
if (sortAction === 'add') {
|
|
2571
2571
|
var _table$options$maxMul;
|
|
2572
2572
|
|
|
2573
2573
|
newSorting = [...old, {
|
|
2574
2574
|
id: column.id,
|
|
2575
|
-
desc:
|
|
2575
|
+
desc: nextDesc
|
|
2576
2576
|
}]; // Take latest n columns
|
|
2577
2577
|
|
|
2578
2578
|
newSorting.splice(0, newSorting.length - ((_table$options$maxMul = table.options.maxMultiSortColCount) != null ? _table$options$maxMul : Number.MAX_SAFE_INTEGER));
|
|
2579
|
-
} else if (sortAction === 'toggle'
|
|
2579
|
+
} else if (sortAction === 'toggle') {
|
|
2580
2580
|
// This flips (or sets) the
|
|
2581
2581
|
newSorting = old.map(d => {
|
|
2582
2582
|
if (d.id === column.id) {
|
|
2583
2583
|
return { ...d,
|
|
2584
|
-
desc:
|
|
2584
|
+
desc: nextDesc
|
|
2585
2585
|
};
|
|
2586
2586
|
}
|
|
2587
2587
|
|
|
2588
2588
|
return d;
|
|
2589
2589
|
});
|
|
2590
|
-
} else if (sortAction === 'remove'
|
|
2590
|
+
} else if (sortAction === 'remove') {
|
|
2591
2591
|
newSorting = old.filter(d => d.id !== column.id);
|
|
2592
|
+
} else {
|
|
2593
|
+
newSorting = [{
|
|
2594
|
+
id: column.id,
|
|
2595
|
+
desc: nextDesc
|
|
2596
|
+
}];
|
|
2592
2597
|
}
|
|
2593
2598
|
|
|
2594
2599
|
return newSorting;
|
|
2595
2600
|
});
|
|
2596
2601
|
},
|
|
2597
|
-
|
|
2602
|
+
getFirstSortDir: () => {
|
|
2598
2603
|
var _ref, _column$columnDef$sor;
|
|
2599
2604
|
|
|
2600
2605
|
const sortDescFirst = (_ref = (_column$columnDef$sor = column.columnDef.sortDescFirst) != null ? _column$columnDef$sor : table.options.sortDescFirst) != null ? _ref : column.getAutoSortDir() === 'desc';
|
|
2601
|
-
|
|
2606
|
+
return sortDescFirst ? 'desc' : 'asc';
|
|
2607
|
+
},
|
|
2608
|
+
getNextSortingOrder: multi => {
|
|
2609
|
+
var _table$options$enable, _table$options$enable2;
|
|
2610
|
+
|
|
2611
|
+
const firstSortDirection = column.getFirstSortDir();
|
|
2602
2612
|
const isSorted = column.getIsSorted();
|
|
2603
2613
|
|
|
2604
2614
|
if (!isSorted) {
|
|
2605
2615
|
return firstSortDirection;
|
|
2606
2616
|
}
|
|
2607
2617
|
|
|
2608
|
-
if (isSorted
|
|
2609
|
-
|
|
2610
|
-
|
|
2618
|
+
if (isSorted !== firstSortDirection && ((_table$options$enable = table.options.enableSortingRemoval) != null ? _table$options$enable : true) && ( // If enableSortRemove, enable in general
|
|
2619
|
+
multi ? (_table$options$enable2 = table.options.enableMultiRemove) != null ? _table$options$enable2 : true : true) // If multi, don't allow if enableMultiRemove))
|
|
2620
|
+
) {
|
|
2611
2621
|
return false;
|
|
2612
2622
|
}
|
|
2623
|
+
|
|
2624
|
+
return isSorted === 'desc' ? 'asc' : 'desc';
|
|
2613
2625
|
},
|
|
2614
2626
|
getCanSort: () => {
|
|
2615
2627
|
var _column$columnDef$ena, _table$options$enable3;
|
|
@@ -2893,9 +2905,9 @@ function createTable(options) {
|
|
|
2893
2905
|
header: props => props.header.column.id,
|
|
2894
2906
|
footer: props => props.header.column.id,
|
|
2895
2907
|
cell: props => {
|
|
2896
|
-
var
|
|
2908
|
+
var _props$renderValue$to, _props$renderValue;
|
|
2897
2909
|
|
|
2898
|
-
return (
|
|
2910
|
+
return (_props$renderValue$to = (_props$renderValue = props.renderValue()) == null ? void 0 : _props$renderValue.toString == null ? void 0 : _props$renderValue.toString()) != null ? _props$renderValue$to : null;
|
|
2899
2911
|
},
|
|
2900
2912
|
...table._features.reduce((obj, feature) => {
|
|
2901
2913
|
return Object.assign(obj, feature.getDefaultColumnDef == null ? void 0 : feature.getDefaultColumnDef());
|
|
@@ -3425,9 +3437,7 @@ function getFacetedMinMaxValues() {
|
|
|
3425
3437
|
let facetedMinMaxValues = [firstValue, firstValue];
|
|
3426
3438
|
|
|
3427
3439
|
for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
const value = (_facetedRowModel$flat2 = facetedRowModel.flatRows[i]) == null ? void 0 : _facetedRowModel$flat2.getValue(columnId);
|
|
3440
|
+
const value = facetedRowModel.flatRows[i].getValue(columnId);
|
|
3431
3441
|
|
|
3432
3442
|
if (value < facetedMinMaxValues[0]) {
|
|
3433
3443
|
facetedMinMaxValues[0] = value;
|
|
@@ -3577,7 +3587,7 @@ function getGroupedRowModel() {
|
|
|
3577
3587
|
const subRows = groupUpRecursively(groupedRows, depth + 1, id); // Flatten the leaf rows of the rows in this group
|
|
3578
3588
|
|
|
3579
3589
|
const leafRows = depth ? flattenBy(groupedRows, row => row.subRows) : groupedRows;
|
|
3580
|
-
const row = createRow(table, id,
|
|
3590
|
+
const row = createRow(table, id, leafRows[0].original, index, depth);
|
|
3581
3591
|
Object.assign(row, {
|
|
3582
3592
|
groupingColumnId: columnId,
|
|
3583
3593
|
groupingValue,
|