Skip to content

Commit

Permalink
Merge pull request #332 from fiduswriter/hide/show-columns
Browse files Browse the repository at this point in the history 
Column filter button as plugin
  • Loading branch information
@johanneswilm
johanneswilm authored Aug 22, 2023
2 parents 7747707 + ef08b62 commit b0c042a
Show file tree
Hide file tree
Showing 20 changed files with 831 additions and 237 deletions.
127 changes: 127 additions & 0 deletions docs/demos/23-column-filter-button/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<title>Column Filter Button</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<link rel="stylesheet" href="../dist/css/column_filter.css">
<style>
body {
background-color: #cccccccb;
}
table tr td img, table tr td svg {
height: 40px;
width: 40px;
margin-right: 10px;
vertical-align: middle !important;
}
table td, table th {
padding: 0px;
vertical-align: middle !important;
}
</style>
</head>
<body>
<div id="tbl-machines"></div>

<script type="module">
import {DataTable, addColumnFilter} from "../dist/module.js"
const machineTypeIcons = [
{
name: "Scaler",
code: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
<g>
<circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"></circle>
<circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"></circle>
<path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"></path>
<path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"></path>
<polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"></polygon>
<path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"></path>
<path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"></path>
<polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"></polygon>
<polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"></polygon>
<polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"></polygon>
<polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"></polygon>
<polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"></polygon>
<polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"></polygon>
<polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"></polygon>
<polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"></polygon>
</g>
</svg>
`
},
{
name: "LHD",
code: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
<g>
<path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"></path>
<circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"></circle>
<path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"></path>
<circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"></circle>
<polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"></polygon>
</g>
</svg>
`
}
]

const getMachineTypeIcon = (name = "") => {
const machineType = machineTypeIcons.find(x => x.name === name)
if (machineType) {
return machineType.code
}
return ""

}

const generateTable = (headDefinition = ["Name", "Type", "OEM", "Last Seen"]) => {
const tableData = {
headings: [],
data: []
}

headDefinition.forEach( // Has to have length 2
head => tableData.headings.push(head || "")
)

for (let i = 0; i < 100; i++) {
const machineType = machineTypeIcons[Math.floor(Math.random() * machineTypeIcons.length)].name
tableData.data.push([
`Machine ${i}`,
`${getMachineTypeIcon(machineType)} <span>${machineType}</span>`,
`OEM ${i}`,
`${new Date(+new Date() - Math.floor(Math.random() * 2592000000)).toISOString().slice(0, 19).replace("T", " ")}`
])
}
return tableData
}


const dataTable = new DataTable("#tbl-machines", {
data: generateTable(),
searchable: true,
sortable: true,
perPage: 15,
perPageSelect: [5, 10, 15, 20, 25, 50, 100, 250, 500, 1000],
columns: [
{
select: [0, 3],
hidden: true
}
]
})
window.dataTable = dataTable
window.columnFilter = addColumnFilter(
dataTable,
{
hiddenColumns: [3]
}
)
</script>
</body>
</html>
30 changes: 30 additions & 0 deletions docs/demos/dist/css/column_filter.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.datatable-column-filter-button {
cursor: pointer;
}

button.datatable-column-filter-button {
padding: 6px 12px;
}

/* Menu */

.datatable-column-filter-wrapper {
position: absolute;
}

.datatable-column-filter-menu {
background: #fff none repeat scroll 0 0;
border-radius: 3px;
margin: 0;
min-width: 220px;
padding: 5px 0;
box-shadow: 0px 0px 10px 2px #aaa;
}

.datatable-column-filter-menu > li {
list-style: none;
}

.datatable-column-filter-menu > li, .datatable-column-filter-menu > li > label {
cursor: pointer;
}
Loading

0 comments on commit b0c042a

Please sign in to comment.