修改Table数据源

demo/demolist/Demo0601.js

@@ -11,50 +11,115 @@
 import React, { Component } from 'react';
 import Table from '../../src';
 
-
+const columns = [
-
-const columns5 = [
   {
-    title: "Full Name",
+      title: "序号",
-    width: 100,
+      dataIndex: "index",
-    dataIndex: "name",
+      key: "index",
-    key: "name",
+      width: 80, 
-    fixed: "left"
+      fixed: 'left',
+      render(text, record, index){return index + 1}
   },
-  { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
+  {
-  { title: "address", dataIndex: "address", key: "address" }
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 100, 
+      fixed: 'left',
+  },
+  {
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
+      width: 100
+  },
+  {
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
+      width: 100
+  },
+  {
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
+      width: 100
+  },
+  {
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+       width: 100
+  },
+  {
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+      
+  },
+  {
+      title: "审批状态",
+      dataIndex: "approvalState_name",
+      key: "approvalState_name",
+      width: 100
+  },
+  {
+      title: "确认状态",
+      dataIndex: "confirmState_name",
+      key: "confirmState_name",
+       width: 100
+  }, 
+  {
+      title: "关闭状态",
+      dataIndex: "closeState_name",
+      key: "closeState_name",
+      width: 100
+  }
 ];
 
-const data5 = [
+const data = [
-  {
+  { 
-    key: "1",
+    orderCode:"NU0391025", 
-    name: "John Brown",
+    supplierName: "xx供应商",
-    age: 32,
+    type_name: "1",
-    address: "New York Park"
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
   },
-  {
+  { 
-    key: "2",
+    orderCode:"NU0391027", 
-    name: "Jim Green",
+    supplierName: "xx供应商",
-    age: 40,
+    type_name: "3",
-    address: "London Park"
+    purchasing:'组织b', 
-  },
+    purchasingGroup:"aa",
-  {
+    voucherDate:"2018年07月01日",
-    key: "3",
+    approvalState_name:"已审批",
-    name: "Jim Green",
+    confirmState_name:"终止",
-    age: 40,
+    closeState_name:"已关闭",
-    address: "London Park"
+    key: "3"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
   }
 ];
 
 class Demo51 extends Component {
   render() {
-    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }}  />;
+    return <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}  />;
   }
 }
 

demo/demolist/Demo0602.js

@@ -12,12 +12,13 @@ import React, { Component } from 'react';
 import {Popconfirm} from 'tinper-bee';
 import Table from '../../src';
 
-const columns5 = [
+const columns = [
     {
         title: "序号",
         dataIndex: "index",
         key: "index",
-        width: 100, 
+        width: 80, 
+        render(text, record, index){return index + 1}
     },
     {
         title: "订单编号",
@@ -47,13 +48,13 @@ const columns5 = [
         title: "采购组",
         dataIndex: "purchasingGroup",
         key: "purchasingGroup",
-         width: 300
+         width: 100
     },
     {
         title: "凭证日期",
         dataIndex: "voucherDate",
         key: "voucherDate",
-        width: 100,
+        width: 200,
         
     },
     {
@@ -94,70 +95,48 @@ const columns5 = [
     }
 ];
 
-const data5 = [
+const data = [
     { 
-        index: 1, 
+      orderCode:"NU0391025", 
-        orderCode:"2343", 
+      supplierName: "xx供应商",
-        supplierName: "xxx",
+      type_name: "1",
-        type_name: "123",
+      purchasing:'组织c', 
-        purchasing:'内行', 
+      purchasingGroup:"aa",
-        purchasingGroup:"323",
+      voucherDate:"2018年03月18日",
-        voucherDate:"kkkk",
+      approvalState_name:"已审批",
-        approvalState_name:"vvvv",
+      confirmState_name:"执行中",
-        confirmState_name:"aaaa",
+      closeState_name:"未关闭",
-        closeState_name:"vnnnnn",
+      key: "1"
-        d:"操作",
-        key: "1"
     }, 
     { 
-      index: 2, 
+      orderCode:"NU0391026", 
-      _checked:true,
+      supplierName: "xx供应商",
-      orderCode:"222", 
+      type_name: "2",
-      supplierName: "22xxx",
+      purchasing:'组织a', 
-      type_name: "1223",
+      purchasingGroup:"bb",
-      purchasing:'内行2', 
+      voucherDate:"2018年02月05日",
-      purchasingGroup:"3223",
+      approvalState_name:"已审批",
-      voucherDate:"222kk",
+      confirmState_name:"待确认",
-      approvalState_name:"22vvvv",
+      closeState_name:"未关闭",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"2操作",
       key: "2"
     },
     { 
-      index: 3, 
+      orderCode:"NU0391027", 
-      orderCode:"222", 
+      supplierName: "xx供应商",
-      supplierName: "22xxx",
+      type_name: "3",
-      _disabled:true,
+      purchasing:'组织b', 
-      type_name: "1223",
+      purchasingGroup:"aa",
-      purchasing:'内行2', 
+      voucherDate:"2018年07月01日",
-      purchasingGroup:"3223",
+      approvalState_name:"已审批",
-      voucherDate:"222kk",
+      confirmState_name:"终止",
-      approvalState_name:"22vvvv",
+      closeState_name:"已关闭",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"3操作",
       key: "3"
-    },
+    }
-    { 
-      index: 4, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"4操作",
-      key: "4"
-    },
 ];
 
 class Demo52 extends Component {
   render() {
-    return <Table columns={columns5} data={data5} scroll={{ x:true, y: 200 }}  />;
+    return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }}  />;
   }
 }
 

demo/demolist/Demo0603.js

@@ -12,78 +12,118 @@ import Table from '../../src';
 
 const { Item } = Menu;
 
-const columns24 = [
+const columns = [
   {
-    title: "名字",
+      title: "序号",
-    dataIndex: "a",
+      dataIndex: "index",
-    key: "a",
+      key: "index",
-    width: 100,
+      width: 80, 
-    fixed: "left",
+      fixed: 'left',
+      render(text, record, index){return index + 1}
   },
   {
-    title: "性别",
+      title: "订单编号",
-    dataIndex: "b",
+      dataIndex: "orderCode",
-    key: "b",
+      key: "orderCode",
-    width: 100,
+      width: 100, 
-    fixed: "left",
+      fixed: 'left',
   },
   {
-    title: "年龄",
+      title: "供应商名称",
-    dataIndex: "c",
+      dataIndex: "supplierName",
-    key: "c",
+      key: "supplierName",
-    width: 100, 
+      width: 150
   },
   {
-    title: "武功级别",
+      title: "类型",
-    dataIndex: "d",
+      dataIndex: "type_name",
-    key: "d",
+      key: "type_name",
-    width: 150 
+      width: 100
   },
   {
-    title: "对手",
+      title: "采购组织",
-    dataIndex: "e",
+      dataIndex: "purchasing",
-    key: "e",
+      key: "purchasing",
-    width: 100 
+      width: 100
   },
   {
-    title: "帮派",
+      title: "采购组",
-    dataIndex: "f",
+      dataIndex: "purchasingGroup",
-    key: "f",
+      key: "purchasingGroup",
-    width: 100 
+       width: 100
   },
   {
-    title: "武功类型",
+      title: "凭证日期",
-    dataIndex: "g",
+      dataIndex: "voucherDate",
-    key: "g",
+      key: "voucherDate",
-    width: 150 
+      width: 200,
+      
   },
   {
-    title: "师傅",
+      title: "审批状态",
-    dataIndex: "k",
+      dataIndex: "approvalState_name",
-    key: "k",
+      key: "approvalState_name",
-    // width: 100 
+      width: 100
   },
   {
-    title: "攻击系数",
+      title: "确认状态",
-    dataIndex: "h",
+      dataIndex: "confirmState_name",
-    key: "h",
+      key: "confirmState_name",
-    width: 100 
+       width: 100
+  }, 
+  {
+      title: "关闭状态",
+      dataIndex: "closeState_name",
+      key: "closeState_name",
+      width: 100
   }
 ];
 
-
+const data = [
-const data24 = [
+  { 
-  { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
+    orderCode:"NU0391025", 
-  { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
+    supplierName: "xx供应商",
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
+    type_name: "1",
-]; 
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
+];
  
 class Demo24 extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      columns:columns24
+      columns:columns
     }
   }
   
@@ -149,7 +189,7 @@ class Demo24 extends Component {
     columns = this.renderColumnsDropdown(columns);
     return(
       <div className="demo24">
-        <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
+        <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}/>
       </div>
     )
   }

demo/demolist/Demo0802.js

@@ -2,22 +2,54 @@
 *
 * @title 列过滤面板
 * @parent 列操作-隐藏 Hide
-* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
+* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
 *
 */
 
 
 import React, { Component } from 'react';
-import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
+import {Icon,Popover} from "tinper-bee";
-
 import Table from '../../src';
 import filterColumn from '../../src/lib/filterColumn';
 import sum from '../../src/lib/sum';
 
-const data21 = [
+const data = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
+  { 
-  { a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
+    orderCode:"NU0391025", 
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
 ];
 
 const FilterColumnTable = filterColumn(Table, Popover, Icon);
@@ -30,34 +62,41 @@ class Demo21 extends Component {
   constructor(props) {
     super(props);
     this.state ={
-              columns21: [
+      columns: [
-                {
+        {
-                  title: "名字",
+          title: "序号",
-                  dataIndex: "a",
+          dataIndex: "index",
-                  key: "a"
+          key: "index",
-                  // width: 100
+          width: 80, 
-                },
+          fixed: 'left',
-                {
+          render(text, record, index){return index + 1}
-                  title: "性别",
+        },
-                  dataIndex: "b",
+        {
-                  key: "b",
+            title: "订单编号",
-                  // width: 100
+            dataIndex: "orderCode",
-                },
+            key: "orderCode",
-                {
+            width: 100, 
-                  title: "年龄",
+            fixed: 'left',
-                  dataIndex: "c",
+        },
-                  key: "c",
+        {
-                  ifshow:false,
+            title: "供应商名称",
-                  // width: 200,
+            dataIndex: "supplierName",
-                  // sumCol: true,
+            key: "supplierName",
-                  sorter: (a, b) => a.c - b.c
+            width: 150
-                },
+        },
-                {
+        {
-                  title: "武功级别",
+            title: "类型",
-                  dataIndex: "d",
+            dataIndex: "type_name",
-                  key: "d"
+            key: "type_name",
-                }
+            width: 100
-              ]};
+        },
+        {
+            title: "采购组织",
+            dataIndex: "purchasing",
+            key: "purchasing",
+            width: 100
+        },
+      ]};
   }
   afterFilter = (optData,columns)=>{
     if(optData.key == 'b'){
@@ -75,11 +114,14 @@ class Demo21 extends Component {
   }
  
   render() {
-    
+    return <FilterColumnTable 
-    return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
+            columns={this.state.columns} 
+            data={data} 
+            afterFilter={this.afterFilter} 
+            showFilterPopover={this.state.showFilterPopover}
+            />;
   }
 }
+
 Demo21.defaultProps = defaultProps21;
-
-
 export default Demo21;

demo/demolist/Demo0903.js

@@ -2,7 +2,7 @@
  *
  * @title 多列排序
  * @parent 列操作-排序 Sort
- * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
+ * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
  *
  */
 

demo/demolist/Demo1001.js

@@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列顺序
 * @parent 列操作-拖拽 Drag
-* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
+* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@@ -10,7 +10,7 @@ import {Icon} from "tinper-bee";
 import Table from '../../src'; 
 import dragColumn from '../../src/lib/dragColumn';
 
-const columns22 = [
+const columns = [
   {
     title: "名字",
     dataIndex: "a",
@@ -39,7 +39,7 @@ const columns22 = [
   }
 ];
 
-const data22 = [
+const data = [
   { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
   { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
   { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
@@ -57,13 +57,20 @@ class Demo22 extends Component {
   }
  
   render() {
-    return <DragColumnTable columns={columns22} data={data22} bordered
+    return <DragColumnTable 
-    
+            columns={columns} 
-    draggable={true} 
+            data={data} 
+            bordered
+            draggable={true} 
+            onDrop ={(event,data,columns)=>{
+              console.log("--拖拽交换列后触发事件");
+              console.log("event.target:",event.target);
+              console.log("data:",data);
+              console.log("拖拽完成后的columns:",columns);
+            }}
     />;
   }
 }
+
 Demo22.defaultProps = defaultProps22;
-
-
 export default Demo22;

demo/demolist/Demo1002.js

@@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列宽度
 * @parent 列操作-拖拽 Drag
-* @description 注：不支持tree结构的表头、合并表头的table
+* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@@ -62,14 +62,17 @@ class Demo23 extends Component {
   }
 
   render() {
-    return <DragColumnTable columns={columns23} data={data23} bordered
+    return <DragColumnTable 
-    dragborder={true} 
+            columns={columns23} 
-    draggable={true} 
+            data={data23} 
-    scroll={{y:200}}
+            bordered
-    onDropBorder ={(e,width)=>{
+            dragborder={true} 
-      console.log(width+"--调整列宽后触发事件",e.target);
+            draggable={true} 
-    }}
+            scroll={{y:200}}
-    />;
+            onDropBorder ={(e,width)=>{
+              console.log(width+"--调整列宽后触发事件",e.target);
+            }}
+            />;
   }
 }
 Demo23.defaultProps = defaultProps23;

demo/demolist/Demo1103.js

@@ -1,8 +1,8 @@
 /**
 *
-* @title 选中行颜色、自定义表格标题和表尾
+* @title 自定义表格标题、表尾、选中行颜色
 * @parent 扩展行 Expanded Row
-* @description 选中行的样式可自定义
+* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
 */
 
 import React, { Component } from "react";
@@ -11,15 +11,16 @@ import {Button,Tooltip,} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [
-  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];
 
 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-  { a: "黄蓉", b: "男", c: 67, key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];
 
 class Demo26 extends Component {
@@ -49,8 +50,8 @@ class Demo26 extends Component {
               selectedRowIndex: index
           });
         }}
-        title={currentData => <div>标题: 这是一个标题</div>}
+        title={currentData => <div>员工信息统计表</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
+        footer={currentData => <div>合计: 共{data.length}条数据</div>}
       /> 
     );
   }

demo/demolist/Demo1106.js

@@ -2,7 +2,7 @@
 *
 * @title 自定义行高
 * @parent 扩展行 Expanded Row
-* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
+* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
 */
 
 import React, { Component } from "react";
@@ -10,32 +10,16 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [
-  {
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-    fixed:'left',
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-    render: (text, record, index) => {
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "60px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
 ];
 
 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];
 
 class Demo1 extends Component {
@@ -63,7 +47,6 @@ class Demo1 extends Component {
 
   render() {
     return (
-   
         <Table
           columns={columns}
           data={data}

dist/demo.css

@@ -7,7 +7,6 @@
 @import url(../node_modules/bee-dropdown/build/Dropdown.css);
 @import url(../node_modules/bee-input-number/build/InputNumber.css);
 @import url(../node_modules/bee-modal/build/Modal.css);
-@import url(../node_modules/tinper-bee/assets/tinper-bee.css);
 .red {
   color: rgb(244,67,54) !important; }