@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/table/table.js

@@ -289,34 +289,37 @@ function FilterDropdown(t0) {
     return t9;
 }
 function Table(t0) {
-    const $ = compiler_runtime_c(160);
-    const { columns, dataSource, rowKey, loading: t1, pagination: paginationProp, onChange, scroll, rowSelection, size, emptyText: t2, bordered: t3, className, classNames, styles } = t0;
+    const $ = compiler_runtime_c(162);
+    const { columns, dataSource, rowKey, loading: t1, pagination: paginationProp, onChange, scroll, rowSelection, size, variant, headerBackground: t2, emptyText: t3, bordered: t4, className, classNames, styles } = t0;
     const loading = void 0 === t1 ? false : t1;
-    const emptyText = void 0 === t2 ? "No Data" : t2;
-    const bordered = void 0 === t3 ? false : t3;
+    const headerBackground = void 0 === t2 ? true : t2;
+    const emptyText = void 0 === t3 ? "No Data" : t3;
+    const bordered = void 0 === t4 ? false : t4;
     const ctx = useTaoConfig();
     const resolvedSize = size ?? ctx.size;
+    const resolvedVariant = variant ?? ("outlined" === ctx.variant ? "filled" : ctx.variant);
+    const showBorder = "outlined" === resolvedVariant || bordered && "borderless" !== resolvedVariant;
     let defaultSortCol;
-    let t4;
     let t5;
+    let t6;
     if ($[0] !== columns) {
         defaultSortCol = columns.find(_temp);
-        t4 = useState;
-        t5 = defaultSortCol ? getColKey(defaultSortCol, columns.indexOf(defaultSortCol)) : null;
+        t5 = useState;
+        t6 = defaultSortCol ? getColKey(defaultSortCol, columns.indexOf(defaultSortCol)) : null;
         $[0] = columns;
         $[1] = defaultSortCol;
-        $[2] = t4;
-        $[3] = t5;
+        $[2] = t5;
+        $[3] = t6;
     } else {
         defaultSortCol = $[1];
-        t4 = $[2];
-        t5 = $[3];
+        t5 = $[2];
+        t6 = $[3];
     }
-    const [sortKey, setSortKey] = t4(t5);
+    const [sortKey, setSortKey] = t5(t6);
     const [sortOrder, setSortOrder] = useState(defaultSortCol?.defaultSortOrder ?? null);
-    let t6;
+    let t7;
     if ($[4] !== columns) {
-        t6 = ()=>{
+        t7 = ()=>{
             const init = {};
             for(let i = 0; i < columns.length; i++){
                 const col = columns[i];
@@ -328,18 +331,18 @@ function Table(t0) {
             return init;
         };
         $[4] = columns;
-        $[5] = t6;
-    } else t6 = $[5];
-    const [filterValues, setFilterValues] = useState(t6);
+        $[5] = t7;
+    } else t7 = $[5];
+    const [filterValues, setFilterValues] = useState(t7);
     const hasPagination = false !== paginationProp;
     const paginationConfig = false === paginationProp ? void 0 : paginationProp;
     const [internalPage, setInternalPage] = useState(paginationConfig?.defaultCurrent ?? 1);
     const [internalPageSize, setInternalPageSize] = useState(paginationConfig?.defaultPageSize ?? paginationConfig?.pageSize ?? 10);
     const currentPage = paginationConfig?.current ?? internalPage;
     const pageSize = paginationConfig?.pageSize ?? internalPageSize;
-    let t7;
+    let t8;
     if ($[6] !== columns) {
-        t7 = (key_0, order)=>{
+        t8 = (key_0, order)=>{
             if (!key_0 || !order) return {
                 order: null
             };
@@ -352,12 +355,12 @@ function Table(t0) {
             };
         };
         $[6] = columns;
-        $[7] = t7;
-    } else t7 = $[7];
-    const buildSorterResult = t7;
-    let t8;
+        $[7] = t8;
+    } else t8 = $[7];
+    const buildSorterResult = t8;
+    let t9;
     if ($[8] !== columns) {
-        t8 = (fv)=>{
+        t9 = (fv)=>{
             const result = {};
             for(let i_1 = 0; i_1 < columns.length; i_1++){
                 const col_1 = columns[i_1];
@@ -370,12 +373,12 @@ function Table(t0) {
             return result;
         };
         $[8] = columns;
-        $[9] = t8;
-    } else t8 = $[9];
-    const buildFiltersRecord = t8;
-    let t9;
+        $[9] = t9;
+    } else t9 = $[9];
+    const buildFiltersRecord = t9;
+    let t10;
     if ($[10] !== buildFiltersRecord || $[11] !== buildSorterResult || $[12] !== onChange) {
-        t9 = (page, ps, sk, so, fv_0)=>{
+        t10 = (page, ps, sk, so, fv_0)=>{
             onChange?.({
                 current: page,
                 pageSize: ps
@@ -384,12 +387,12 @@ function Table(t0) {
         $[10] = buildFiltersRecord;
         $[11] = buildSorterResult;
         $[12] = onChange;
-        $[13] = t9;
-    } else t9 = $[13];
-    const triggerChange = t9;
-    let t10;
+        $[13] = t10;
+    } else t10 = $[13];
+    const triggerChange = t10;
+    let t11;
     if ($[14] !== currentPage || $[15] !== filterValues || $[16] !== pageSize || $[17] !== sortKey || $[18] !== sortOrder || $[19] !== triggerChange) {
-        t10 = (colKey, col_2)=>{
+        t11 = (colKey, col_2)=>{
             if (void 0 !== col_2.sortOrder) return void triggerChange(currentPage, pageSize, colKey, nextSortOrder(col_2.sortOrder), filterValues);
             const next = sortKey === colKey ? nextSortOrder(sortOrder) : "ascend";
             const newKey = null === next ? null : colKey;
@@ -403,12 +406,12 @@ function Table(t0) {
         $[17] = sortKey;
         $[18] = sortOrder;
         $[19] = triggerChange;
-        $[20] = t10;
-    } else t10 = $[20];
-    const handleSort = t10;
-    let t11;
+        $[20] = t11;
+    } else t11 = $[20];
+    const handleSort = t11;
+    let t12;
     if ($[21] !== filterValues || $[22] !== pageSize || $[23] !== sortKey || $[24] !== sortOrder || $[25] !== triggerChange) {
-        t11 = (colKey_0, values)=>{
+        t12 = (colKey_0, values)=>{
             const next_0 = {
                 ...filterValues,
                 [colKey_0]: values
@@ -422,12 +425,12 @@ function Table(t0) {
         $[23] = sortKey;
         $[24] = sortOrder;
         $[25] = triggerChange;
-        $[26] = t11;
-    } else t11 = $[26];
-    const handleFilter = t11;
-    let t12;
+        $[26] = t12;
+    } else t12 = $[26];
+    const handleFilter = t12;
+    let t13;
     if ($[27] !== filterValues || $[28] !== sortKey || $[29] !== sortOrder || $[30] !== triggerChange) {
-        t12 = (page_0, ps_0)=>{
+        t13 = (page_0, ps_0)=>{
             setInternalPage(page_0);
             setInternalPageSize(ps_0);
             triggerChange(page_0, ps_0, sortKey, sortOrder, filterValues);
@@ -436,9 +439,9 @@ function Table(t0) {
         $[28] = sortKey;
         $[29] = sortOrder;
         $[30] = triggerChange;
-        $[31] = t12;
-    } else t12 = $[31];
-    const handlePageChange = t12;
+        $[31] = t13;
+    } else t13 = $[31];
+    const handlePageChange = t13;
     let data;
     if ($[32] !== columns || $[33] !== dataSource || $[34] !== filterValues || $[35] !== sortKey || $[36] !== sortOrder) {
         data = [
@@ -452,18 +455,18 @@ function Table(t0) {
             const activeVals = controlledValues ?? filterValues[key_2];
             if (activeVals && activeVals.length > 0) data = data.filter((record)=>activeVals.some((v)=>col_3.onFilter(v, record)));
         }
-        let t13;
+        let t14;
         if ($[38] !== sortKey || $[39] !== sortOrder) {
-            t13 = (col_4, i_3)=>{
+            t14 = (col_4, i_3)=>{
                 const key_3 = getColKey(col_4, i_3);
                 const order_0 = void 0 !== col_4.sortOrder ? col_4.sortOrder : sortKey === key_3 ? sortOrder : null;
                 return null !== order_0 && "function" == typeof col_4.sorter;
             };
             $[38] = sortKey;
             $[39] = sortOrder;
-            $[40] = t13;
-        } else t13 = $[40];
-        const activeSortCol = columns.find(t13);
+            $[40] = t14;
+        } else t14 = $[40];
+        const activeSortCol = columns.find(t14);
         if (activeSortCol && "function" == typeof activeSortCol.sorter) {
             const colIdx_0 = columns.indexOf(activeSortCol);
             const key_4 = getColKey(activeSortCol, colIdx_0);
@@ -483,40 +486,40 @@ function Table(t0) {
     } else data = $[37];
     const processedData = data;
     const totalForPagination = paginationConfig?.total ?? processedData.length;
-    let t13;
+    let t14;
     bb0: {
         if (!hasPagination) {
-            t13 = processedData;
+            t14 = processedData;
             break bb0;
         }
         if (paginationConfig?.total !== void 0) {
-            t13 = processedData;
+            t14 = processedData;
             break bb0;
         }
         const start = (currentPage - 1) * pageSize;
-        let t14;
+        let t15;
         if ($[41] !== pageSize || $[42] !== processedData || $[43] !== start) {
-            t14 = processedData.slice(start, start + pageSize);
+            t15 = processedData.slice(start, start + pageSize);
             $[41] = pageSize;
             $[42] = processedData;
             $[43] = start;
-            $[44] = t14;
-        } else t14 = $[44];
-        t13 = t14;
+            $[44] = t15;
+        } else t15 = $[44];
+        t14 = t15;
     }
-    const paginatedData = t13;
+    const paginatedData = t14;
     const selectionColWidth = rowSelection?.columnWidth ?? 48;
     const selectionType = rowSelection?.type ?? "checkbox";
-    let t14;
+    let t15;
     if ($[45] !== rowSelection?.selectedRowKeys) {
-        t14 = rowSelection?.selectedRowKeys ?? [];
+        t15 = rowSelection?.selectedRowKeys ?? [];
         $[45] = rowSelection?.selectedRowKeys;
-        $[46] = t14;
-    } else t14 = $[46];
-    const selectedKeys = t14;
-    let t15;
+        $[46] = t15;
+    } else t15 = $[46];
+    const selectedKeys = t15;
+    let t16;
     if ($[47] !== dataSource || $[48] !== rowKey || $[49] !== rowSelection || $[50] !== selectedKeys || $[51] !== selectionType) {
-        t15 = (key_5, record_0)=>{
+        t16 = (key_5, record_0)=>{
             if (!rowSelection?.onChange) return;
             let nextKeys;
             nextKeys = "radio" === selectionType ? [
@@ -533,12 +536,12 @@ function Table(t0) {
         $[49] = rowSelection;
         $[50] = selectedKeys;
         $[51] = selectionType;
-        $[52] = t15;
-    } else t15 = $[52];
-    const handleSelectRow = t15;
-    let t16;
+        $[52] = t16;
+    } else t16 = $[52];
+    const handleSelectRow = t16;
+    let t17;
     if ($[53] !== dataSource || $[54] !== paginatedData || $[55] !== rowKey || $[56] !== rowSelection) {
-        t16 = (checked)=>{
+        t17 = (checked)=>{
             if (!rowSelection?.onChange) return;
             if (checked) {
                 const allKeys = paginatedData.filter((r_0)=>{
@@ -553,14 +556,14 @@ function Table(t0) {
         $[54] = paginatedData;
         $[55] = rowKey;
         $[56] = rowSelection;
-        $[57] = t16;
-    } else t16 = $[57];
-    const handleSelectAll = t16;
+        $[57] = t17;
+    } else t17 = $[57];
+    const handleSelectAll = t17;
     const scrollRef = useRef(null);
     const [scrollState, setScrollState] = useState("left");
-    let t17;
+    let t18;
     if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
-        t17 = ()=>{
+        t18 = ()=>{
             const el = scrollRef.current;
             if (!el) return;
             const { scrollLeft, scrollWidth, clientWidth } = el;
@@ -570,29 +573,29 @@ function Table(t0) {
             else if (atLeft) setScrollState("left");
             else atRight ? setScrollState("right") : setScrollState("middle");
         };
-        $[58] = t17;
-    } else t17 = $[58];
-    const handleScroll = t17;
-    let t18;
+        $[58] = t18;
+    } else t18 = $[58];
+    const handleScroll = t18;
+    let t19;
     if ($[59] !== scroll?.x) {
-        t18 = ()=>{
+        t19 = ()=>{
             if (!scroll?.x) return;
             handleScroll();
         };
         $[59] = scroll?.x;
-        $[60] = t18;
-    } else t18 = $[60];
-    const t19 = scroll?.x;
-    let t20;
-    if ($[61] !== t19) {
-        t20 = [
-            t19,
+        $[60] = t19;
+    } else t19 = $[60];
+    const t20 = scroll?.x;
+    let t21;
+    if ($[61] !== t20) {
+        t21 = [
+            t20,
             handleScroll
         ];
-        $[61] = t19;
-        $[62] = t20;
-    } else t20 = $[62];
-    useEffect(t18, t20);
+        $[61] = t20;
+        $[62] = t21;
+    } else t21 = $[62];
+    useEffect(t19, t21);
     let cols;
     if ($[63] !== columns || $[64] !== rowSelection || $[65] !== selectionColWidth) {
         cols = [];
@@ -615,9 +618,9 @@ function Table(t0) {
         $[66] = cols;
     } else cols = $[66];
     const allColumns = cols;
-    let t21;
+    let t22;
     if ($[67] !== allColumns || $[68] !== scroll?.x) {
-        t21 = ()=>{
+        t22 = ()=>{
             if (!scroll?.x) return {};
             const positions = {};
             let leftOffset = 0;
@@ -641,68 +644,69 @@ function Table(t0) {
         };
         $[67] = allColumns;
         $[68] = scroll?.x;
-        $[69] = t21;
-    } else t21 = $[69];
+        $[69] = t22;
+    } else t22 = $[69];
     scroll?.x;
-    let t22;
-    if ($[70] !== t21) {
-        t22 = t21();
-        $[70] = t21;
-        $[71] = t22;
-    } else t22 = $[71];
-    const stickyPositions = t22;
     let t23;
+    if ($[70] !== t22) {
+        t23 = t22();
+        $[70] = t22;
+        $[71] = t23;
+    } else t23 = $[71];
+    const stickyPositions = t23;
+    let t24;
     if ($[72] !== sortKey || $[73] !== sortOrder) {
-        t23 = (col_8, colKey_1)=>{
+        t24 = (col_8, colKey_1)=>{
             if (void 0 !== col_8.sortOrder) return col_8.sortOrder;
             return sortKey === colKey_1 ? sortOrder : null;
         };
         $[72] = sortKey;
         $[73] = sortOrder;
-        $[74] = t23;
-    } else t23 = $[74];
-    const getResolvedSortOrder = t23;
-    let t24;
+        $[74] = t24;
+    } else t24 = $[74];
+    const getResolvedSortOrder = t24;
+    let t25;
     if ($[75] !== scroll) {
-        t24 = scroll?.x ? {
+        t25 = scroll?.x ? {
             minWidth: "number" == typeof scroll.x ? `${scroll.x}px` : scroll.x
         } : {};
         $[75] = scroll;
-        $[76] = t24;
-    } else t24 = $[76];
-    const tableStyle = t24;
-    let t25;
+        $[76] = t25;
+    } else t25 = $[76];
+    const tableStyle = t25;
+    let t26;
     if ($[77] !== paginatedData || $[78] !== rowKey || $[79] !== rowSelection || $[80] !== selectedKeys) {
-        t25 = paginatedData.length > 0 && paginatedData.filter((r_3)=>!rowSelection?.getCheckboxProps?.(r_3)?.disabled).every((r_4)=>selectedKeys.includes(getRowKey(r_4, rowKey)));
+        t26 = paginatedData.length > 0 && paginatedData.filter((r_3)=>!rowSelection?.getCheckboxProps?.(r_3)?.disabled).every((r_4)=>selectedKeys.includes(getRowKey(r_4, rowKey)));
         $[77] = paginatedData;
         $[78] = rowKey;
         $[79] = rowSelection;
         $[80] = selectedKeys;
-        $[81] = t25;
-    } else t25 = $[81];
-    const isAllSelected = t25;
+        $[81] = t26;
+    } else t26 = $[81];
+    const isAllSelected = t26;
     const isIndeterminate = !isAllSelected && selectedKeys.length > 0;
-    const t26 = bordered || void 0;
-    const t27 = scroll?.x ? scrollState : void 0;
-    const t28 = classNames?.root;
-    let t29;
-    if ($[82] !== className || $[83] !== t28) {
-        t29 = cx(t28, className);
+    const t27 = headerBackground ? void 0 : "off";
+    const t28 = showBorder || void 0;
+    const t29 = scroll?.x ? scrollState : void 0;
+    const t30 = classNames?.root;
+    let t31;
+    if ($[82] !== className || $[83] !== t30) {
+        t31 = cx(t30, className);
         $[82] = className;
-        $[83] = t28;
-        $[84] = t29;
-    } else t29 = $[84];
-    const t30 = styles?.root;
-    const t31 = scroll?.x ? handleScroll : void 0;
-    let t32;
+        $[83] = t30;
+        $[84] = t31;
+    } else t31 = $[84];
+    const t32 = styles?.root;
+    const t33 = scroll?.x ? handleScroll : void 0;
+    let t34;
     if ($[85] !== loading) {
-        t32 = loading && /*#__PURE__*/ jsx(LoadingSpinner, {});
+        t34 = loading && /*#__PURE__*/ jsx(LoadingSpinner, {});
         $[85] = loading;
-        $[86] = t32;
-    } else t32 = $[86];
-    let t33;
+        $[86] = t34;
+    } else t34 = $[86];
+    let t35;
     if ($[87] !== handleSelectAll || $[88] !== isAllSelected || $[89] !== isIndeterminate || $[90] !== rowSelection || $[91] !== selectionColWidth || $[92] !== selectionType || $[93] !== stickyPositions) {
-        t33 = rowSelection && /*#__PURE__*/ jsx("th", {
+        t35 = rowSelection && /*#__PURE__*/ jsx("th", {
             "data-tao-table-cell": "",
             "data-tao-table-selection-cell": "",
             "data-tao-fixed": "left",
@@ -731,13 +735,13 @@ function Table(t0) {
         $[91] = selectionColWidth;
         $[92] = selectionType;
         $[93] = stickyPositions;
-        $[94] = t33;
-    } else t33 = $[94];
-    let t34;
+        $[94] = t35;
+    } else t35 = $[94];
+    let t36;
     if ($[95] !== classNames || $[96] !== columns || $[97] !== filterValues || $[98] !== getResolvedSortOrder || $[99] !== handleFilter || $[100] !== handleSort || $[101] !== scroll?.x || $[102] !== stickyPositions || $[103] !== styles) {
-        let t35;
+        let t37;
         if ($[105] !== classNames || $[106] !== filterValues || $[107] !== getResolvedSortOrder || $[108] !== handleFilter || $[109] !== handleSort || $[110] !== scroll?.x || $[111] !== stickyPositions || $[112] !== styles) {
-            t35 = (col_9, i_6)=>{
+            t37 = (col_9, i_6)=>{
                 const colKey_2 = getColKey(col_9, i_6);
                 const hasSorter = !!col_9.sorter;
                 const hasFilter = !!(col_9.filters && col_9.filters.length > 0);
@@ -805,9 +809,9 @@ function Table(t0) {
             $[110] = scroll?.x;
             $[111] = stickyPositions;
             $[112] = styles;
-            $[113] = t35;
-        } else t35 = $[113];
-        t34 = columns.map(t35);
+            $[113] = t37;
+        } else t37 = $[113];
+        t36 = columns.map(t37);
         $[95] = classNames;
         $[96] = columns;
         $[97] = filterValues;
@@ -817,26 +821,26 @@ function Table(t0) {
         $[101] = scroll?.x;
         $[102] = stickyPositions;
         $[103] = styles;
-        $[104] = t34;
-    } else t34 = $[104];
-    let t35;
-    if ($[114] !== t33 || $[115] !== t34) {
-        t35 = /*#__PURE__*/ jsx("thead", {
+        $[104] = t36;
+    } else t36 = $[104];
+    let t37;
+    if ($[114] !== t35 || $[115] !== t36) {
+        t37 = /*#__PURE__*/ jsx("thead", {
             "data-tao-table-thead": "",
             children: /*#__PURE__*/ jsxs("tr", {
                 children: [
-                    t33,
-                    t34
+                    t35,
+                    t36
                 ]
             })
         });
-        $[114] = t33;
-        $[115] = t34;
-        $[116] = t35;
-    } else t35 = $[116];
-    let t36;
+        $[114] = t35;
+        $[115] = t36;
+        $[116] = t37;
+    } else t37 = $[116];
+    let t38;
     if ($[117] !== classNames || $[118] !== columns || $[119] !== emptyText || $[120] !== handleSelectRow || $[121] !== paginatedData || $[122] !== rowKey || $[123] !== rowSelection || $[124] !== scroll?.x || $[125] !== selectedKeys || $[126] !== selectionType || $[127] !== stickyPositions || $[128] !== styles) {
-        t36 = 0 === paginatedData.length ? /*#__PURE__*/ jsx("tr", {
+        t38 = 0 === paginatedData.length ? /*#__PURE__*/ jsx("tr", {
             children: /*#__PURE__*/ jsx("td", {
                 "data-tao-table-cell": "",
                 "data-tao-table-empty": "",
@@ -914,51 +918,51 @@ function Table(t0) {
         $[126] = selectionType;
         $[127] = stickyPositions;
         $[128] = styles;
-        $[129] = t36;
-    } else t36 = $[129];
-    let t37;
-    if ($[130] !== t36) {
-        t37 = /*#__PURE__*/ jsx("tbody", {
+        $[129] = t38;
+    } else t38 = $[129];
+    let t39;
+    if ($[130] !== t38) {
+        t39 = /*#__PURE__*/ jsx("tbody", {
             "data-tao-table-tbody": "",
-            children: t36
+            children: t38
         });
-        $[130] = t36;
-        $[131] = t37;
-    } else t37 = $[131];
-    let t38;
-    if ($[132] !== t35 || $[133] !== t37 || $[134] !== tableStyle) {
-        t38 = /*#__PURE__*/ jsxs("table", {
+        $[130] = t38;
+        $[131] = t39;
+    } else t39 = $[131];
+    let t40;
+    if ($[132] !== t37 || $[133] !== t39 || $[134] !== tableStyle) {
+        t40 = /*#__PURE__*/ jsxs("table", {
             "data-tao-table": "",
             style: tableStyle,
             children: [
-                t35,
-                t37
+                t37,
+                t39
             ]
         });
-        $[132] = t35;
-        $[133] = t37;
+        $[132] = t37;
+        $[133] = t39;
         $[134] = tableStyle;
-        $[135] = t38;
-    } else t38 = $[135];
-    let t39;
-    if ($[136] !== t31 || $[137] !== t32 || $[138] !== t38) {
-        t39 = /*#__PURE__*/ jsxs("div", {
+        $[135] = t40;
+    } else t40 = $[135];
+    let t41;
+    if ($[136] !== t33 || $[137] !== t34 || $[138] !== t40) {
+        t41 = /*#__PURE__*/ jsxs("div", {
             "data-tao-table-scroll": "",
             ref: scrollRef,
-            onScroll: t31,
+            onScroll: t33,
             children: [
-                t32,
-                t38
+                t34,
+                t40
             ]
         });
-        $[136] = t31;
-        $[137] = t32;
-        $[138] = t38;
-        $[139] = t39;
-    } else t39 = $[139];
-    let t40;
+        $[136] = t33;
+        $[137] = t34;
+        $[138] = t40;
+        $[139] = t41;
+    } else t41 = $[139];
+    let t42;
     if ($[140] !== classNames?.pagination || $[141] !== currentPage || $[142] !== handlePageChange || $[143] !== hasPagination || $[144] !== pageSize || $[145] !== paginationConfig?.pageSizeOptions || $[146] !== paginationConfig?.showSizeChanger || $[147] !== paginationConfig?.showTotal || $[148] !== resolvedSize || $[149] !== styles?.pagination || $[150] !== totalForPagination) {
-        t40 = hasPagination && totalForPagination > 0 && /*#__PURE__*/ jsx("div", {
+        t42 = hasPagination && totalForPagination > 0 && /*#__PURE__*/ jsx("div", {
             "data-tao-table-pagination": "",
             className: classNames?.pagination,
             style: styles?.pagination,
@@ -984,32 +988,36 @@ function Table(t0) {
         $[148] = resolvedSize;
         $[149] = styles?.pagination;
         $[150] = totalForPagination;
-        $[151] = t40;
-    } else t40 = $[151];
-    let t41;
-    if ($[152] !== resolvedSize || $[153] !== t26 || $[154] !== t27 || $[155] !== t29 || $[156] !== t30 || $[157] !== t39 || $[158] !== t40) {
-        t41 = /*#__PURE__*/ jsxs("div", {
+        $[151] = t42;
+    } else t42 = $[151];
+    let t43;
+    if ($[152] !== resolvedSize || $[153] !== resolvedVariant || $[154] !== t27 || $[155] !== t28 || $[156] !== t29 || $[157] !== t31 || $[158] !== t32 || $[159] !== t41 || $[160] !== t42) {
+        t43 = /*#__PURE__*/ jsxs("div", {
             "data-tao-table-wrapper": "",
             "data-tao-size": resolvedSize,
-            "data-tao-bordered": t26,
-            "data-tao-scroll-state": t27,
-            className: t29,
-            style: t30,
+            "data-tao-variant": resolvedVariant,
+            "data-tao-header-bg": t27,
+            "data-tao-bordered": t28,
+            "data-tao-scroll-state": t29,
+            className: t31,
+            style: t32,
             children: [
-                t39,
-                t40
+                t41,
+                t42
             ]
         });
         $[152] = resolvedSize;
-        $[153] = t26;
+        $[153] = resolvedVariant;
         $[154] = t27;
-        $[155] = t29;
-        $[156] = t30;
-        $[157] = t39;
-        $[158] = t40;
+        $[155] = t28;
+        $[156] = t29;
+        $[157] = t31;
+        $[158] = t32;
         $[159] = t41;
-    } else t41 = $[159];
-    return t41;
+        $[160] = t42;
+        $[161] = t43;
+    } else t43 = $[161];
+    return t43;
 }
 function _temp(c) {
     return c.defaultSortOrder;