Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 1b5079f

Browse filesBrowse files
xidedixxidedix
committed
fix(CDataTable): tableFilter and cleaner minor cleanup
1 parent 39c4625 commit 1b5079f
Copy full SHA for 1b5079f

File tree

4 files changed

+47
-12
lines changed
Filter options

4 files changed

+47
-12
lines changed

‎src/table/CDataTable.css

Copy file name to clipboard
+18Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.c-datatable-filter {
2+
display: flex;
3+
flex-flow: row nowrap;
4+
justify-content: flex-start;
5+
align-items: center;
6+
}
7+
.c-datatable-filter label {
8+
margin-bottom: 0;
9+
}
10+
.c-datatable-items-per-page {
11+
display: flex;
12+
flex-flow: row nowrap;
13+
justify-content: flex-end;
14+
align-items: center;
15+
}
16+
.c-datatable-items-per-page label {
17+
margin-bottom: 0;
18+
}

‎src/table/CDataTable.js

Copy file name to clipboardExpand all lines: src/table/CDataTable.js
+9-7Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
33
import classNames from 'classnames'
44
import CPagination from '../pagination/CPagination'
55
import CElementCover from '../element-cover/CElementCover'
6-
import style from './CDataTable.module.css'
76
import CIcon from '@coreui/icons-react'
87
import { cilArrowTop, cilBan, cilFilterX } from '@coreui/icons'
8+
import style from './CDataTable.module.css'
9+
import './CDataTable.css'
910

1011
//component - CoreUI / CTable
1112
const CDataTable = props => {
@@ -343,7 +344,7 @@ const CDataTable = props => {
343344

344345
const cleanerProps = {
345346
content: cilFilterX,
346-
className: `ml-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
347+
className: `mfs-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
347348
role: isFiltered ? 'button' : null,
348349
tabIndex: isFiltered ? 0 : null,
349350
}
@@ -414,11 +415,11 @@ const CDataTable = props => {
414415
<div className="row my-2 mx-0">
415416
{
416417
(tableFilter || cleaner) &&
417-
<div className="col-sm-6 form-inline p-0">
418+
<div className="col-sm-6 form-inline p-0 c-datatable-filter">
418419
{
419420
tableFilter &&
420421
<>
421-
<label className="mr-2">{tableFilterData.label}</label>
422+
<label className="mfe-2">{tableFilterData.label}</label>
422423
<input
423424
className="form-control"
424425
type="text"
@@ -436,6 +437,7 @@ const CDataTable = props => {
436437
<CIcon
437438
{...cleanerProps}
438439
onClick={clean}
440+
onKeyUp={(event) => { if (event.key === 'Enter') clean() }}
439441
/>
440442
)
441443
}
@@ -444,9 +446,9 @@ const CDataTable = props => {
444446
}
445447
{
446448
itemsPerPageSelect &&
447-
<div className={'col-sm-6 p-0 ' + (!(tableFilter || cleaner) && ' offset-sm-6')}>
448-
<div className="form-inline justify-content-sm-end">
449-
<label className="mr-2">{paginationSelect.label}</label>
449+
<div className={`col-sm-6 p-0 ${(tableFilter || cleaner) ? '' : 'offset-sm-6'}`}>
450+
<div className="form-inline justify-content-sm-end c-datatable-items-per-page">
451+
<label className="mfe-2">{paginationSelect.label}</label>
450452
<select
451453
className="form-control"
452454
onChange={paginationChange}

‎src/table/tests/CDataTable.test.js

Copy file name to clipboardExpand all lines: src/table/tests/CDataTable.test.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ describe('CDataTable', () => {
4949
clickableRows
5050
columnFilter
5151
tableFilter
52+
cleaner
5253
addTableClasses="table-classes"
5354
size="sm"
5455
dark

‎src/table/tests/__snapshots__/CDataTable.test.js.snap

Copy file name to clipboardExpand all lines: src/table/tests/__snapshots__/CDataTable.test.js.snap
+19-5Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ Array [
5151
className="row my-2 mx-0"
5252
>
5353
<div
54-
className="col-sm-6 form-inline p-0"
54+
className="col-sm-6 form-inline p-0 c-datatable-filter"
5555
>
5656
<label
57-
className="mr-2"
57+
className="mfe-2"
5858
>
5959
Filter:
6060
</label>
@@ -67,15 +67,29 @@ Array [
6767
type="text"
6868
value=""
6969
/>
70+
<svg
71+
className="c-icon mfs-2 transparent"
72+
dangerouslySetInnerHTML={
73+
Object {
74+
"__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'/>",
75+
}
76+
}
77+
onClick={[Function]}
78+
onKeyUp={[Function]}
79+
role="img"
80+
tabIndex={null}
81+
viewBox="0 0 512 512"
82+
xmlns="http://www.w3.org/2000/svg"
83+
/>
7084
</div>
7185
<div
72-
className="col-sm-6 p-0 false"
86+
className="col-sm-6 p-0 "
7387
>
7488
<div
75-
className="form-inline justify-content-sm-end"
89+
className="form-inline justify-content-sm-end c-datatable-items-per-page"
7690
>
7791
<label
78-
className="mr-2"
92+
className="mfe-2"
7993
>
8094
Items per page:
8195
</label>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.