fix(CDataTable): tableFilter and cleaner minor cleanup

coreui · Dec 22, 2020 · 1b5079f · 1b5079f
1 parent 39c4625
commit 1b5079f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 12 deletions.
diff --git a/src/table/CDataTable.css b/src/table/CDataTable.css
@@ -0,0 +1,18 @@
+.c-datatable-filter {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.c-datatable-filter label {
+  margin-bottom: 0;
+}
+.c-datatable-items-per-page {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+.c-datatable-items-per-page label {
+  margin-bottom: 0;
+}
diff --git a/src/table/CDataTable.js b/src/table/CDataTable.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import CPagination from '../pagination/CPagination'
 import CElementCover from '../element-cover/CElementCover'
-import style from './CDataTable.module.css'
 import CIcon from '@coreui/icons-react'
 import { cilArrowTop, cilBan, cilFilterX } from '@coreui/icons'
+import style from './CDataTable.module.css'
+import './CDataTable.css'
 
 //component - CoreUI / CTable
 const CDataTable = props => {
@@ -343,7 +344,7 @@ const CDataTable = props => {
 
   const cleanerProps = {
     content: cilFilterX,
-    className: `ml-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
+    className: `mfs-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
     role: isFiltered ? 'button' : null,
     tabIndex: isFiltered ? 0 : null,
   }
@@ -414,11 +415,11 @@ const CDataTable = props => {
     <div className="row my-2 mx-0">
       {
         (tableFilter || cleaner) &&
-        <div className="col-sm-6 form-inline p-0">
+        <div className="col-sm-6 form-inline p-0 c-datatable-filter">
           {
             tableFilter &&
             <>
-              <label className="mr-2">{tableFilterData.label}</label>
+              <label className="mfe-2">{tableFilterData.label}</label>
               <input
                 className="form-control"
                 type="text"
@@ -436,6 +437,7 @@ const CDataTable = props => {
               <CIcon
                 {...cleanerProps}
                 onClick={clean}
+                onKeyUp={(event) => { if (event.key === 'Enter') clean() }}
               />
             )
           }
@@ -444,9 +446,9 @@ const CDataTable = props => {
       }
       {
         itemsPerPageSelect &&
-        <div className={'col-sm-6 p-0 ' + (!(tableFilter || cleaner) && ' offset-sm-6')}>
-          <div className="form-inline justify-content-sm-end">
-            <label className="mr-2">{paginationSelect.label}</label>
+        <div className={`col-sm-6 p-0 ${(tableFilter || cleaner) ? '' : 'offset-sm-6'}`}>
+          <div className="form-inline justify-content-sm-end c-datatable-items-per-page">
+            <label className="mfe-2">{paginationSelect.label}</label>
             <select
               className="form-control"
               onChange={paginationChange}

diff --git a/src/table/tests/CDataTable.test.js b/src/table/tests/CDataTable.test.js
@@ -49,6 +49,7 @@ describe('CDataTable', () => {
         clickableRows
         columnFilter
         tableFilter
+        cleaner
         addTableClasses="table-classes"
         size="sm"
         dark

diff --git a/src/table/tests/__snapshots__/CDataTable.test.js.snap b/src/table/tests/__snapshots__/CDataTable.test.js.snap
@@ -51,10 +51,10 @@ Array [
       className="row my-2 mx-0"
     >
       <div
-        className="col-sm-6 form-inline p-0"
+        className="col-sm-6 form-inline p-0 c-datatable-filter"
       >
         <label
-          className="mr-2"
+          className="mfe-2"
         >
           Filter:
         </label>
@@ -67,15 +67,29 @@ Array [
           type="text"
           value=""
         />
+        <svg
+          className="c-icon mfs-2 transparent"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>",
+            }
+          }
+          onClick={[Function]}
+          onKeyUp={[Function]}
+          role="img"
+          tabIndex={null}
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        />
       </div>
       <div
-        className="col-sm-6 p-0 false"
+        className="col-sm-6 p-0 "
       >
         <div
-          className="form-inline justify-content-sm-end"
+          className="form-inline justify-content-sm-end c-datatable-items-per-page"
         >
           <label
-            className="mr-2"
+            className="mfe-2"
           >
             Items per page:
           </label>