@aplus-frontend/ui 0.1.26 → 0.1.28

package/es/src/ap-table/constants.mjs

@@ -3,71 +3,59 @@ import "../ap-field/index.mjs";
 import "../ap-form/index.mjs";
 import "./components/index/index.vue.mjs";
 import "./components/status/index.vue.mjs";
-import i from "../ap-form/items/date/index.vue.mjs";
-import o from "../ap-form/items/date-range/index.vue.mjs";
-import r from "../ap-form/items/number/index.vue.mjs";
+import o from "../ap-form/items/date/index.vue.mjs";
+import r from "../ap-form/items/date-range/index.vue.mjs";
+import i from "../ap-form/items/number/index.vue.mjs";
 import t from "../ap-form/items/radio/index.vue.mjs";
-import e from "../ap-form/items/select/index.vue.mjs";
-import a from "../ap-form/items/switch/index.vue.mjs";
+import a from "../ap-form/items/select/index.vue.mjs";
+import f from "../ap-form/items/switch/index.vue.mjs";
 import { ApFormItemText as m } from "../ap-form/items/text/index.mjs";
-import f from "../ap-form/items/text-area/index.vue.mjs";
-import s from "../ap-form/items/checkbox/index.vue.mjs";
-import n from "../ap-field/date/index.vue.mjs";
+import _ from "../ap-form/items/text-area/index.vue.mjs";
+import e from "../ap-form/items/checkbox/index.vue.mjs";
+import s from "../ap-field/date/index.vue.mjs";
 import p from "../ap-field/date-range/index.vue.mjs";
-import _ from "../ap-field/number/index.vue.mjs";
-import c from "../ap-field/radio/index.vue.mjs";
-import l from "../ap-field/select/index.vue.mjs";
+import c from "../ap-field/number/index.vue.mjs";
+import n from "../ap-field/radio/index.vue.mjs";
+import $ from "../ap-field/select/index.vue.mjs";
 import d from "../ap-field/switch/index.vue.mjs";
-import { ApFieldText as $ } from "../ap-field/text/index.mjs";
-import x from "../ap-field/text-area/index.vue.mjs";
-import b from "../ap-field/checkbox/index.vue.mjs";
-import w from "../ap-action/group/index.vue.mjs";
-import h from "./components/index/index.vue2.mjs";
-import k from "./components/status/index.vue2.mjs";
-import A from "../ap-field/text/password.vue.mjs";
-const Q = {
-  date: i,
-  dateRange: o,
-  number: r,
+import { ApFieldText as x } from "../ap-field/text/index.mjs";
+import b from "../ap-field/text-area/index.vue.mjs";
+import l from "../ap-field/checkbox/index.vue.mjs";
+import h from "../ap-action/group/index.vue.mjs";
+import w from "./components/index/index.vue2.mjs";
+import A from "./components/status/index.vue2.mjs";
+import u from "../ap-field/text/password.vue.mjs";
+const U = {
+  date: o,
+  dateRange: r,
+  number: i,
   radio: t,
-  select: e,
-  switch: a,
+  select: a,
+  switch: f,
   text: m,
-  textArea: f,
-  checkbox: s,
+  textArea: _,
+  checkbox: e,
   password: m.Password
-}, U = {
-  date: n,
+}, W = {
+  date: s,
   dateRange: p,
-  number: _,
-  radio: c,
-  select: l,
+  number: c,
+  radio: n,
+  select: $,
   switch: d,
-  text: $,
-  textArea: x,
-  checkbox: b,
-  action: w,
-  index: h,
-  status: k,
-  password: A
+  text: x,
+  textArea: b,
+  checkbox: l,
+  action: h,
+  index: w,
+  status: A,
+  password: u
 }, X = [
   "action",
   "index"
-], Y = {
-  display: "-webkit-inline-box",
-  "-webkit-line-clamp": 2,
-  "-webkit-box-orient": "vertical",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "normal",
-  maxWidth: "100%",
-  verticalAlign: "middle",
-  wordBreak: "break-all",
-  flex: 1
-};
+];
 export {
-  Q as apTableFormItemMap,
-  U as apTableRenderItemMap,
-  Y as ellipsisTitleStyle,
+  U as apTableFormItemMap,
+  W as apTableRenderItemMap,
   X as noRenderAsFormItemValueList
 };

package/es/src/ap-table/context.d.ts

@@ -0,0 +1,31 @@
+import { ColumnType } from 'ant-design-vue/es/table';
+import { ComputedRef, InjectionKey } from 'vue';
+import { ApTableProps } from './interface';
+type TableSize = ApTableProps['size'];
+type ApTableContextProps<RecordType> = {
+    /**
+     * 表格列配置
+     */
+    columns?: ComputedRef<ColumnType<RecordType>[]>;
+    /**
+     * 表格列配置备份（只有在props变更后才会变更）
+     */
+    columnsBackup?: ComputedRef<ColumnType<RecordType>[]>;
+    /**
+     * 更新数据源的方法
+     * @param name
+     * @param value
+     * @param triggerChange 是否触发外部的`onValuesChange`函数
+     * @returns
+     */
+    updateColumns?: (nextColumns: ColumnType<RecordType>[]) => void;
+    /**
+     * ApForm内部实例
+     */
+    size?: ComputedRef<TableSize>;
+    updateSize?: (nextSize: TableSize) => void;
+};
+export declare const ApTableContextKey: InjectionKey<ApTableContextProps<any>>;
+export declare function useProvideApTable<ModelType>(state: ApTableContextProps<ModelType>): void;
+export declare function useInjectApTable(): ApTableContextProps<any>;
+export {};

package/es/src/ap-table/context.mjs

@@ -0,0 +1,20 @@
+import { provide as n, inject as p, computed as e } from "vue";
+const t = Symbol("apTableContextKey");
+function i(o) {
+  n(t, o);
+}
+function l() {
+  return p(t, {
+    columns: e(() => []),
+    updateColumns: () => {
+    },
+    size: e(() => "middle"),
+    updateSize: () => {
+    }
+  });
+}
+export {
+  t as ApTableContextKey,
+  l as useInjectApTable,
+  i as useProvideApTable
+};

package/es/src/ap-table/hooks/use-table-column-state.d.ts

@@ -0,0 +1,18 @@
+import { ApColumnState } from '../interface';
+import { Ref, ComputedRef } from 'vue';
+export declare const useTableColumnState: (initialColumnState: ApColumnState[]) => {
+    columnState: Ref<{
+        key: string | number;
+        show?: boolean | undefined;
+        fixed?: ("left" | "right") | undefined;
+        disabled?: boolean | undefined;
+        label?: any;
+        children?: any[] | undefined;
+    }[]>;
+    selectAll: () => void;
+    unSelectAll: () => void;
+    toggleSelect: (key: string, show?: boolean) => void;
+    setColumnState: (nextColumnState: ApColumnState[]) => void;
+    isAllSelected: ComputedRef<boolean>;
+    toggleSelectAll: () => void;
+};

package/es/src/ap-table/hooks/use-table-column-state.mjs

@@ -0,0 +1,46 @@
+import { ref as d, computed as h, unref as r } from "vue";
+import { isDef as w } from "../../utils/index.mjs";
+function s(c, e) {
+  c.forEach((n) => {
+    var o;
+    e(n), (o = n.children) != null && o.length && s(n.children, e);
+  });
+}
+const p = (c) => {
+  const e = d(c), n = h(() => r(e).every((t) => t.show));
+  function o() {
+    const t = r(e);
+    s(t, (l) => {
+      !l.disabled && (l.show = !0);
+    });
+  }
+  function u() {
+    const t = r(e);
+    s(t, (l) => {
+      !l.disabled && (l.show = !1);
+    });
+  }
+  function i() {
+    r(n) ? u() : o();
+  }
+  function a(t, l) {
+    s(r(e), (f) => {
+      f.key === t && (f.show = w(l) ? l : !f.show);
+    });
+  }
+  function S(t) {
+    e.value = t;
+  }
+  return {
+    columnState: e,
+    selectAll: o,
+    unSelectAll: u,
+    toggleSelect: a,
+    setColumnState: S,
+    isAllSelected: n,
+    toggleSelectAll: i
+  };
+};
+export {
+  p as useTableColumnState
+};

package/es/src/ap-table/hooks/use-table-content-height.mjs

@@ -1,39 +1,39 @@
-import { useElementSize as d } from "@vueuse/core";
-import { ref as g, computed as H, unref as l, onUpdated as S } from "vue";
-function f(t) {
+import { useElementSize as b } from "@vueuse/core";
+import { ref as s, computed as y, unref as f, onUpdated as v } from "vue";
+function p(t) {
   if (!t)
     return 0;
   const e = parseFloat(t);
   return Number.isNaN(e) ? 0 : e;
 }
-function h(t) {
+function m(t) {
   if (!t)
     return 0;
   const e = getComputedStyle(t);
-  return t.clientHeight + f(e.marginTop) + f(e.marginBottom);
+  return t.clientHeight + p(e.marginTop) + p(e.marginBottom);
 }
-const v = (t) => {
-  const e = g(), { height: s } = d(e), a = g();
+const T = (t) => {
+  const e = s(), { height: d } = b(e), a = s();
   let i = !1;
-  const m = H(() => {
-    var o, u, c;
-    const r = ((u = (o = e.value) == null ? void 0 : o.querySelector(".ant-table-header")) == null ? void 0 : u.clientHeight) || 47, n = (c = e.value) == null ? void 0 : c.querySelector(".ant-pagination"), p = n ? h(n) : l(a);
-    return n && (i = !0), Math.ceil(
-      l(s) - r - (p || 0) - ((t == null ? void 0 : t.offset) || 0)
+  const H = y(() => {
+    var u, c, l, g, h;
+    const n = ((c = (u = e.value) == null ? void 0 : u.querySelector(".aplus-ap-table-header-wrapper")) == null ? void 0 : c.clientHeight) || 0, r = ((g = (l = e.value) == null ? void 0 : l.querySelector(".ant-table-header")) == null ? void 0 : g.clientHeight) || 47, o = (h = e.value) == null ? void 0 : h.querySelector(".ant-pagination"), S = o ? m(o) : f(a);
+    return o && (i = !0), Math.ceil(
+      f(d) - r - n - (S || 0) - ((t == null ? void 0 : t.offset) || 0)
     );
   });
-  return S(() => {
-    var n;
+  return v(() => {
+    var r;
     if (i)
       return;
-    const r = (n = e.value) == null ? void 0 : n.querySelector(".ant-pagination");
-    if (!r) {
+    const n = (r = e.value) == null ? void 0 : r.querySelector(".ant-pagination");
+    if (!n) {
       a.value = 0;
       return;
     }
-    a.value = h(r), i = !0;
-  }), { contentRef: e, height: m };
+    a.value = m(n), i = !0;
+  }), { contentRef: e, height: H };
 };
 export {
-  v as default
+  T as default
 };

package/es/src/ap-table/hooks/use-table-paging.d.ts

@@ -91,4 +91,5 @@ export declare const useTablePaging: <DataType = any, ParamsType = Record<string
         dataSource: DataType[];
     }>;
     dataSource: ComputedRef<DataType[]>;
+    setDataSource: (dataSource: DataType[]) => void;
 };

package/es/src/ap-table/hooks/use-table-paging.mjs

@@ -1,10 +1,10 @@
-import { ref as x, nextTick as Z, unref as o, onMounted as _, computed as V, createVNode as P } from "vue";
-import { parseFieldValue as I, dataIndexToStr as k } from "../utils.mjs";
-import { isArray as ee } from "lodash-unified";
+import { ref as P, nextTick as _, unref as n, onMounted as I, computed as V, createVNode as b } from "vue";
+import { parseFieldValue as k, dataIndexToStr as ee } from "../utils.mjs";
+import { isArray as te } from "lodash-unified";
 import "../../config-provider/index.mjs";
-import { useLocale as te } from "../../config-provider/hooks/use-locale.mjs";
-import { useNamespace as ae } from "../../config-provider/hooks/use-namespace.mjs";
-const le = ({
+import { useLocale as ae } from "../../config-provider/hooks/use-locale.mjs";
+import { useNamespace as ne } from "../../config-provider/hooks/use-namespace.mjs";
+const ue = ({
   manual: B = !1,
   defaultCurrent: E = 1,
   defaultPageSize: w = 10,
@@ -13,145 +13,150 @@ const le = ({
   defaultData: $ = [],
   formatParams: C,
   paramsValueTypeMap: y,
-  resetFieldsIgnores: O,
+  resetFieldsIgnores: D,
   filterFields: q,
   sortFields: J,
-  showLessItems: b = !1,
+  showLessItems: z = !1,
   showTotal: L = !0
 }) => {
-  let z = 0, p = {};
-  const Q = (e) => C ? C(e) : e, l = x(), c = x(E), f = x(w), {
-    t: S
-  } = te(), {
-    b: F
-  } = ae("ap-table"), r = x({
+  let S = 0, f = {};
+  const Q = (e) => C ? C(e) : e, c = P(), l = P(E), p = P(w), {
+    t: F
+  } = ae(), {
+    b: T
+  } = ne("ap-table"), o = P({
     total: 0,
     records: $,
     loading: !1
-  }), R = async (e) => {
-    var n;
+  }), O = async (e) => {
+    var r;
     const a = Q(e), t = Date.now();
-    z = t, r.value.loading = !0;
+    S = t, o.value.loading = !0;
     try {
       const s = await M({
         ...N,
         ...a
       });
-      z === t && (r.value.total = s.total || ((n = s.data) == null ? void 0 : n.length) || 0, r.value.records = [...s.data || []]);
+      S === t && (o.value.total = s.total || ((r = s.data) == null ? void 0 : r.length) || 0, o.value.records = [...s.data || []]);
     } catch {
-      z === t && (r.value.records = [], r.value.total = 0);
+      S === t && (o.value.records = [], o.value.total = 0);
     } finally {
-      r.value.loading = !1;
+      o.value.loading = !1;
     }
-  }, j = (e) => {
+  }, R = (e) => {
     const a = {};
-    return Object.entries(e).forEach(([t, n]) => {
-      if (a[t] = n, y && n) {
+    return Object.entries(e).forEach(([t, r]) => {
+      if (a[t] = r, y && r) {
         const s = y[t];
-        s && (a[t] = I(s, n));
+        s && (a[t] = k(s, r));
       }
     }), a;
   }, G = async (e) => {
-    var n, s, g, d, m, u, h;
-    const a = ((s = (n = l.value) == null ? void 0 : n.apForm) == null ? void 0 : s.getFieldsValue()) || {}, t = {};
+    var r, s, g, d, m, u, h;
+    const a = ((s = (r = c.value) == null ? void 0 : r.apForm) == null ? void 0 : s.getFieldsValue()) || {}, t = {};
     Object.entries(a).forEach(([v, i]) => {
-      O && O.indexOf(v) > -1 && (t[v] = i);
-    }), await ((d = (g = l.value) == null ? void 0 : g.apForm) == null ? void 0 : d.resetFields()), (h = (u = (m = l.value) == null ? void 0 : m.apForm) == null ? void 0 : u.setFieldsValue) == null || h.call(u, t), Z(() => {
+      D && D.indexOf(v) > -1 && (t[v] = i);
+    }), await ((d = (g = c.value) == null ? void 0 : g.apForm) == null ? void 0 : d.resetFields()), (h = (u = (m = c.value) == null ? void 0 : m.apForm) == null ? void 0 : u.setFieldsValue) == null || h.call(u, t), _(() => {
       e == null || e();
     });
-  }, T = (e) => {
-    p = e;
-    const a = j(e);
-    R(a);
+  }, x = (e) => {
+    f = e;
+    const a = R(e);
+    O(a);
   }, H = (e) => {
-    T({
-      ...p,
+    x({
+      ...f,
       ...e
     });
-  }, D = () => {
+  }, j = () => {
     var a, t;
-    const e = ((t = (a = l.value) == null ? void 0 : a.apForm) == null ? void 0 : t.getFieldsValue(!0)) || {};
-    c.value = 1, T({
+    const e = ((t = (a = c.value) == null ? void 0 : a.apForm) == null ? void 0 : t.getFieldsValue(!0)) || {};
+    l.value = 1, x({
       ...e,
       current: 1,
-      pageSize: p.pageSize || w
+      pageSize: f.pageSize || w
     });
   }, K = () => {
-    G(D);
+    G(j);
   }, U = () => {
-    T(p);
+    x(f);
   }, W = (e) => {
-    const a = o(r).total - e, t = Math.ceil(a / o(f)), n = o(c) > t ? t : o(c);
+    const a = n(o).total - e, t = Math.ceil(a / n(p)), r = n(l) > t ? t : n(l);
     H({
-      current: n > 0 ? n : 1
+      current: r > 0 ? r : 1
     });
   }, A = (e, a, t) => {
     var m, u, h, v;
-    const n = ((u = (m = l.value) == null ? void 0 : m.apForm) == null ? void 0 : u.getFieldsValue(!0)) || {};
-    c.value = e.current, f.value = e.pageSize;
-    const s = ee(t) ? [...t] : [t], g = {};
+    const r = ((u = (m = c.value) == null ? void 0 : m.apForm) == null ? void 0 : u.getFieldsValue(!0)) || {};
+    l.value = e.current, p.value = e.pageSize;
+    const s = te(t) ? [...t] : [t], g = {};
     for (const i of s)
-      (h = o(J)) != null && h.includes(i.field) && (g[k(i.field)] = i.order);
+      (h = n(J)) != null && h.includes(i.field) && (g[ee(i.field)] = i.order);
     const d = {};
     for (const i of Object.keys(a))
-      (v = o(q)) != null && v.includes(i) && (d[i] = a[i]);
-    T({
-      ...n,
+      (v = n(q)) != null && v.includes(i) && (d[i] = a[i]);
+    x({
+      ...r,
       filter: d,
       sort: g,
       current: e.current,
       pageSize: e.pageSize
     });
   };
-  _(() => {
+  I(() => {
     var a, t;
-    const e = ((t = (a = l.value) == null ? void 0 : a.apForm) == null ? void 0 : t.getFieldsValue(!0)) || {};
-    if (p = {
-      current: o(c),
-      pageSize: o(f),
+    const e = ((t = (a = c.value) == null ? void 0 : a.apForm) == null ? void 0 : t.getFieldsValue(!0)) || {};
+    if (f = {
+      current: n(l),
+      pageSize: n(p),
       ...e
     }, !B) {
-      const n = j(p);
-      R(n);
+      const r = R(f);
+      O(r);
     }
   });
-  const X = V(() => o(r).total === 0 ? "-" : `${o(c.value)}/${Math.ceil(o(r).total / o(f))}`), Y = V(() => ({
-    loading: o(r).loading,
+  const X = V(() => n(o).total === 0 ? "-" : `${n(l.value)}/${Math.ceil(n(o).total / n(p))}`);
+  function Y(e) {
+    e != null && e.length && (o.value.records = e, o.value.total = e.length);
+  }
+  const Z = V(() => ({
+    loading: n(o).loading,
     pagination: {
-      current: o(c),
-      pageSize: o(f),
-      total: o(r).total,
-      showSizeChanger: !b,
-      showQuickJumper: !b,
-      showLessItems: b,
+      current: n(l),
+      pageSize: n(p),
+      total: n(o).total,
+      showSizeChanger: !z,
+      showQuickJumper: !z,
+      showLessItems: z,
       size: "default",
-      showTotal: L ? (e) => P("span", {
-        class: F("pagination-total-wrapper")
-      }, [S("ap.apTable.pagination.totalLeftPrefix"), " ", P("span", {
-        class: F("pagination-count-text")
-      }, [e]), " ", S("ap.apTable.pagination.totalLeftSuffix"), P("span", {
-        class: F("pagination--total-right")
-      }, [S("ap.apTable.pagination.totalRightPrefix"), " ", P("span", {
-        class: F("pagination-count-text")
-      }, [o(X)]), " ", S("ap.apTable.pagination.totalRightSuffix")])]) : void 0
+      showTotal: L ? (e) => b("span", {
+        class: T("pagination-total-wrapper")
+      }, [F("ap.apTable.pagination.totalLeftPrefix"), " ", b("span", {
+        class: T("pagination-count-text")
+      }, [e]), " ", F("ap.apTable.pagination.totalLeftSuffix"), b("span", {
+        class: T("pagination--total-right")
+      }, [F("ap.apTable.pagination.totalRightPrefix"), " ", b("span", {
+        class: T("pagination-count-text")
+      }, [n(X)]), " ", F("ap.apTable.pagination.totalRightSuffix")])]) : void 0
     },
     onChange: A,
-    dataSource: o(r).records
+    dataSource: n(o).records
   }));
   return {
-    formRef: l,
-    submit: D,
+    formRef: c,
+    submit: j,
     reset: K,
     refresh: U,
     refreshByDelete: W,
-    data: r,
-    current: c,
-    pageSize: f,
+    data: o,
+    current: l,
+    pageSize: p,
     handleTableChange: A,
-    tableProps: Y,
-    dataSource: V(() => o(r).records)
+    tableProps: Z,
+    dataSource: V(() => n(o).records),
+    setDataSource: Y
   };
 };
 export {
-  le as useTablePaging
+  ue as useTablePaging
 };

package/es/src/ap-table/interface.d.ts

@@ -72,6 +72,52 @@ export type CommonFieldReturnType = ApFormItemProps & {
     placeholder?: string;
     disabled?: boolean;
 };
+export type ApTableSettingType = {
+    /**
+     * 用于持久化缓存的key
+     */
+    persistenceKey?: string;
+    /**
+     * 持久化类型
+     */
+    persistenceType?: 'localStorage' | 'sessionStorage';
+    /**
+     * 列的默认状态
+     */
+    defaultValue?: Recordable<Omit<ApColumnState, 'children' | 'key'>>;
+    /**
+     * 列状态变更时的回调（注意，返回的是全量状态）
+     * @param val
+     * @returns
+     */
+    onChange?: (val: ApColumnState[]) => void;
+};
+export type ApColumnState = {
+    /**
+     * 列的唯一标识
+     */
+    key: string | number;
+    /**
+     * 列是否显示
+     */
+    show?: boolean;
+    /**
+     * 列的固定状态
+     */
+    fixed?: 'left' | 'right';
+    /**
+     * 是否可以修改列状态
+     */
+    disabled?: boolean;
+    /**
+     * 列对应显示的文本
+     */
+    label?: any;
+    /**
+     * 子节点状态
+     */
+    children?: ApColumnState[];
+};
 export type FieldPropsType<ReturnType, RecordType, ExtraValueType, ValueType extends ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType> = ReturnType | ((opt: Partial<{
     value: any;
     text: any;
@@ -81,7 +127,7 @@ export type FieldPropsType<ReturnType, RecordType, ExtraValueType, ValueType ext
     column: ApColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>;
 }>) => ReturnType);
 export type ApColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? ExtraProColumnType<RecordType> & {
-    children?: ApColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
+    children?: Omit<ApColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>, 'fixed'>[];
     /**
      * 表单项所占据的格子数（1-24格）
      */
@@ -267,6 +313,10 @@ export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<R
      * 设置表格列是否可以resize
      */
     columnResizable?: ColumnType['resizable'];
+    /**
+     * 是否开启表格设置
+     */
+    settings?: true | ApTableSettingType;
 };
 export type ApTableExpose<SearchParamsType = Recordable, RecordType = any> = {
     /**

package/es/src/ap-table/style/ap-table.css

@@ -7,7 +7,9 @@
   display: flex;
   flex-direction: column;
 }
-.aplus-ap-table-adaptive .ant-table-wrapper,
+.aplus-ap-table-adaptive .ant-table-wrapper {
+  flex: 1;
+}
 .aplus-ap-table-adaptive .ant-spin-nested-loading,
 .aplus-ap-table-adaptive .ant-spin-container {
   height: 100%;
@@ -35,6 +37,8 @@
 .aplus-ap-table__table-wrapper {
   flex: 1;
   max-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .aplus-ap-table__table-wrapper-card {
   padding: 16px;
@@ -98,3 +102,27 @@
 .aplus-ap-table-pagination-total-wrapper {
   color: var(--ap-table-pagination-total-color, #526A90);
 }
+.aplus-ap-table-header {
+  padding-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.aplus-ap-table-header__title {
+  flex: 1;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.aplus-ap-table-table-header__title {
+  display: -webkit-inline-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  max-width: 100%;
+  vertical-align: middle;
+  word-break: break-all;
+  flex: 1;
+}