Add dependencies, styling
- Add sass - Add jquery - Add bootstrap 4 - Import bootstrap source files in style.scss
This commit is contained in:
Faris Ansari
parent
069f4af668
commit
329c27b343
500
index.html
Normal file
500
index.html
Normal file
@ -0,0 +1,500 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>ReGrid</h1>
|
||||||
|
<section>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<script src="./node_modules/jquery/dist/jquery.js"></script>
|
||||||
|
<script src="./lib/ReGrid.js"></script>
|
||||||
|
<script>
|
||||||
|
$(() => {
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
"columns": [
|
||||||
|
"Name",
|
||||||
|
"Position",
|
||||||
|
"Office",
|
||||||
|
"Extn.",
|
||||||
|
"Start date",
|
||||||
|
"Salary",
|
||||||
|
],
|
||||||
|
"rows": [
|
||||||
|
[
|
||||||
|
"Tiger Nixon",
|
||||||
|
"System Architect",
|
||||||
|
"Edinburgh",
|
||||||
|
"5421",
|
||||||
|
"2011/04/25",
|
||||||
|
"$320,800"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Garrett Winters",
|
||||||
|
"Accountant",
|
||||||
|
"Tokyo",
|
||||||
|
"8422",
|
||||||
|
"2011/07/25",
|
||||||
|
"$170,750"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Ashton Cox",
|
||||||
|
"Junior Technical Author",
|
||||||
|
"San Francisco",
|
||||||
|
"1562",
|
||||||
|
"2009/01/12",
|
||||||
|
"$86,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Cedric Kelly",
|
||||||
|
"Senior Javascript Developer",
|
||||||
|
"Edinburgh",
|
||||||
|
"6224",
|
||||||
|
"2012/03/29",
|
||||||
|
"$433,060"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Airi Satou",
|
||||||
|
"Accountant",
|
||||||
|
"Tokyo",
|
||||||
|
"5407",
|
||||||
|
"2008/11/28",
|
||||||
|
"$162,700"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Brielle Williamson",
|
||||||
|
"Integration Specialist",
|
||||||
|
"New York",
|
||||||
|
"4804",
|
||||||
|
"2012/12/02",
|
||||||
|
"$372,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Herrod Chandler",
|
||||||
|
"Sales Assistant",
|
||||||
|
"San Francisco",
|
||||||
|
"9608",
|
||||||
|
"2012/08/06",
|
||||||
|
"$137,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Rhona Davidson",
|
||||||
|
"Integration Specialist",
|
||||||
|
"Tokyo",
|
||||||
|
"6200",
|
||||||
|
"2010/10/14",
|
||||||
|
"$327,900"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Colleen Hurst",
|
||||||
|
"Javascript Developer",
|
||||||
|
"San Francisco",
|
||||||
|
"2360",
|
||||||
|
"2009/09/15",
|
||||||
|
"$205,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Sonya Frost",
|
||||||
|
"Software Engineer",
|
||||||
|
"Edinburgh",
|
||||||
|
"1667",
|
||||||
|
"2008/12/13",
|
||||||
|
"$103,600"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Jena Gaines",
|
||||||
|
"Office Manager",
|
||||||
|
"London",
|
||||||
|
"3814",
|
||||||
|
"2008/12/19",
|
||||||
|
"$90,560"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Quinn Flynn",
|
||||||
|
"Support Lead",
|
||||||
|
"Edinburgh",
|
||||||
|
"9497",
|
||||||
|
"2013/03/03",
|
||||||
|
"$342,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Charde Marshall",
|
||||||
|
"Regional Director",
|
||||||
|
"San Francisco",
|
||||||
|
"6741",
|
||||||
|
"2008/10/16",
|
||||||
|
"$470,600"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Haley Kennedy",
|
||||||
|
"Senior Marketing Designer",
|
||||||
|
"London",
|
||||||
|
"3597",
|
||||||
|
"2012/12/18",
|
||||||
|
"$313,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Tatyana Fitzpatrick",
|
||||||
|
"Regional Director",
|
||||||
|
"London",
|
||||||
|
"1965",
|
||||||
|
"2010/03/17",
|
||||||
|
"$385,750"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Michael Silva",
|
||||||
|
"Marketing Designer",
|
||||||
|
"London",
|
||||||
|
"1581",
|
||||||
|
"2012/11/27",
|
||||||
|
"$198,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Paul Byrd",
|
||||||
|
"Chief Financial Officer (CFO)",
|
||||||
|
"New York",
|
||||||
|
"3059",
|
||||||
|
"2010/06/09",
|
||||||
|
"$725,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Gloria Little",
|
||||||
|
"Systems Administrator",
|
||||||
|
"New York",
|
||||||
|
"1721",
|
||||||
|
"2009/04/10",
|
||||||
|
"$237,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Bradley Greer",
|
||||||
|
"Software Engineer",
|
||||||
|
"London",
|
||||||
|
"2558",
|
||||||
|
"2012/10/13",
|
||||||
|
"$132,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Dai Rios",
|
||||||
|
"Personnel Lead",
|
||||||
|
"Edinburgh",
|
||||||
|
"2290",
|
||||||
|
"2012/09/26",
|
||||||
|
"$217,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Jenette Caldwell",
|
||||||
|
"Development Lead",
|
||||||
|
"New York",
|
||||||
|
"1937",
|
||||||
|
"2011/09/03",
|
||||||
|
"$345,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Yuri Berry",
|
||||||
|
"Chief Marketing Officer (CMO)",
|
||||||
|
"New York",
|
||||||
|
"6154",
|
||||||
|
"2009/06/25",
|
||||||
|
"$675,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Caesar Vance",
|
||||||
|
"Pre-Sales Support",
|
||||||
|
"New York",
|
||||||
|
"8330",
|
||||||
|
"2011/12/12",
|
||||||
|
"$106,450"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Doris Wilder",
|
||||||
|
"Sales Assistant",
|
||||||
|
"Sidney",
|
||||||
|
"3023",
|
||||||
|
"2010/09/20",
|
||||||
|
"$85,600"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Angelica Ramos",
|
||||||
|
"Chief Executive Officer (CEO)",
|
||||||
|
"London",
|
||||||
|
"5797",
|
||||||
|
"2009/10/09",
|
||||||
|
"$1,200,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Gavin Joyce",
|
||||||
|
"Developer",
|
||||||
|
"Edinburgh",
|
||||||
|
"8822",
|
||||||
|
"2010/12/22",
|
||||||
|
"$92,575"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Jennifer Chang",
|
||||||
|
"Regional Director",
|
||||||
|
"Singapore",
|
||||||
|
"9239",
|
||||||
|
"2010/11/14",
|
||||||
|
"$357,650"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Brenden Wagner",
|
||||||
|
"Software Engineer",
|
||||||
|
"San Francisco",
|
||||||
|
"1314",
|
||||||
|
"2011/06/07",
|
||||||
|
"$206,850"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Fiona Green",
|
||||||
|
"Chief Operating Officer (COO)",
|
||||||
|
"San Francisco",
|
||||||
|
"2947",
|
||||||
|
"2010/03/11",
|
||||||
|
"$850,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Shou Itou",
|
||||||
|
"Regional Marketing",
|
||||||
|
"Tokyo",
|
||||||
|
"8899",
|
||||||
|
"2011/08/14",
|
||||||
|
"$163,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Michelle House",
|
||||||
|
"Integration Specialist",
|
||||||
|
"Sidney",
|
||||||
|
"2769",
|
||||||
|
"2011/06/02",
|
||||||
|
"$95,400"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Suki Burks",
|
||||||
|
"Developer",
|
||||||
|
"London",
|
||||||
|
"6832",
|
||||||
|
"2009/10/22",
|
||||||
|
"$114,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Prescott Bartlett",
|
||||||
|
"Technical Author",
|
||||||
|
"London",
|
||||||
|
"3606",
|
||||||
|
"2011/05/07",
|
||||||
|
"$145,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Gavin Cortez",
|
||||||
|
"Team Leader",
|
||||||
|
"San Francisco",
|
||||||
|
"2860",
|
||||||
|
"2008/10/26",
|
||||||
|
"$235,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Martena Mccray",
|
||||||
|
"Post-Sales support",
|
||||||
|
"Edinburgh",
|
||||||
|
"8240",
|
||||||
|
"2011/03/09",
|
||||||
|
"$324,050"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Unity Butler",
|
||||||
|
"Marketing Designer",
|
||||||
|
"San Francisco",
|
||||||
|
"5384",
|
||||||
|
"2009/12/09",
|
||||||
|
"$85,675"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Howard Hatfield",
|
||||||
|
"Office Manager",
|
||||||
|
"San Francisco",
|
||||||
|
"7031",
|
||||||
|
"2008/12/16",
|
||||||
|
"$164,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Hope Fuentes",
|
||||||
|
"Secretary",
|
||||||
|
"San Francisco",
|
||||||
|
"6318",
|
||||||
|
"2010/02/12",
|
||||||
|
"$109,850"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Vivian Harrell",
|
||||||
|
"Financial Controller",
|
||||||
|
"San Francisco",
|
||||||
|
"9422",
|
||||||
|
"2009/02/14",
|
||||||
|
"$452,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Timothy Mooney",
|
||||||
|
"Office Manager",
|
||||||
|
"London",
|
||||||
|
"7580",
|
||||||
|
"2008/12/11",
|
||||||
|
"$136,200"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Jackson Bradshaw",
|
||||||
|
"Director",
|
||||||
|
"New York",
|
||||||
|
"1042",
|
||||||
|
"2008/09/26",
|
||||||
|
"$645,750"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Olivia Liang",
|
||||||
|
"Support Engineer",
|
||||||
|
"Singapore",
|
||||||
|
"2120",
|
||||||
|
"2011/02/03",
|
||||||
|
"$234,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Bruno Nash",
|
||||||
|
"Software Engineer",
|
||||||
|
"London",
|
||||||
|
"6222",
|
||||||
|
"2011/05/03",
|
||||||
|
"$163,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Sakura Yamamoto",
|
||||||
|
"Support Engineer",
|
||||||
|
"Tokyo",
|
||||||
|
"9383",
|
||||||
|
"2009/08/19",
|
||||||
|
"$139,575"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Thor Walton",
|
||||||
|
"Developer",
|
||||||
|
"New York",
|
||||||
|
"8327",
|
||||||
|
"2013/08/11",
|
||||||
|
"$98,540"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Finn Camacho",
|
||||||
|
"Support Engineer",
|
||||||
|
"San Francisco",
|
||||||
|
"2927",
|
||||||
|
"2009/07/07",
|
||||||
|
"$87,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Serge Baldwin",
|
||||||
|
"Data Coordinator",
|
||||||
|
"Singapore",
|
||||||
|
"8352",
|
||||||
|
"2012/04/09",
|
||||||
|
"$138,575"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Zenaida Frank",
|
||||||
|
"Software Engineer",
|
||||||
|
"New York",
|
||||||
|
"7439",
|
||||||
|
"2010/01/04",
|
||||||
|
"$125,250"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Zorita Serrano",
|
||||||
|
"Software Engineer",
|
||||||
|
"San Francisco",
|
||||||
|
"4389",
|
||||||
|
"2012/06/01",
|
||||||
|
"$115,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Jennifer Acosta",
|
||||||
|
"Junior Javascript Developer",
|
||||||
|
"Edinburgh",
|
||||||
|
"3431",
|
||||||
|
"2013/02/01",
|
||||||
|
"$75,650"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Cara Stevens",
|
||||||
|
"Sales Assistant",
|
||||||
|
"New York",
|
||||||
|
"3990",
|
||||||
|
"2011/12/06",
|
||||||
|
"$145,600"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Hermione Butler",
|
||||||
|
"Regional Director",
|
||||||
|
"London",
|
||||||
|
"1016",
|
||||||
|
"2011/03/21",
|
||||||
|
"$356,250"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Lael Greer",
|
||||||
|
"Systems Administrator",
|
||||||
|
"London",
|
||||||
|
"6733",
|
||||||
|
"2009/02/27",
|
||||||
|
"$103,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Jonas Alexander",
|
||||||
|
"Developer",
|
||||||
|
"San Francisco",
|
||||||
|
"8196",
|
||||||
|
"2010/07/14",
|
||||||
|
"$86,500"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Shad Decker",
|
||||||
|
"Regional Director",
|
||||||
|
"Edinburgh",
|
||||||
|
"6373",
|
||||||
|
"2008/11/13",
|
||||||
|
"$183,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Michael Bruce",
|
||||||
|
"Javascript Developer",
|
||||||
|
"Singapore",
|
||||||
|
"5384",
|
||||||
|
"2011/06/27",
|
||||||
|
"$183,000"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"Donna Snider",
|
||||||
|
"Customer Support",
|
||||||
|
"New York",
|
||||||
|
"4226",
|
||||||
|
"2011/01/25",
|
||||||
|
"$112,000"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
var grid = new ReGrid({
|
||||||
|
wrapper: document.querySelector('section'),
|
||||||
|
data
|
||||||
|
});
|
||||||
|
|
||||||
|
window._regrid = grid;
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
13
package.json
13
package.json
@ -17,10 +17,14 @@
|
|||||||
"babel-plugin-add-module-exports": "0.2.1",
|
"babel-plugin-add-module-exports": "0.2.1",
|
||||||
"babel-preset-es2015": "6.24.1",
|
"babel-preset-es2015": "6.24.1",
|
||||||
"chai": "3.5.0",
|
"chai": "3.5.0",
|
||||||
|
"css-loader": "^0.28.7",
|
||||||
"eslint": "3.19.0",
|
"eslint": "3.19.0",
|
||||||
"eslint-loader": "1.7.1",
|
"eslint-loader": "1.7.1",
|
||||||
"mocha": "3.3.0",
|
"mocha": "3.3.0",
|
||||||
"webpack": "3.1.0",
|
"node-sass": "^4.5.3",
|
||||||
|
"sass-loader": "^6.0.6",
|
||||||
|
"style-loader": "^0.18.2",
|
||||||
|
"webpack": "^3.1.0",
|
||||||
"yargs": "7.1.0"
|
"yargs": "7.1.0"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
@ -41,5 +45,10 @@
|
|||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/netchampfaris/regrid/issues"
|
"url": "https://github.com/netchampfaris/regrid/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/netchampfaris/regrid"
|
"homepage": "https://github.com/netchampfaris/regrid",
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "^4.0.0-beta",
|
||||||
|
"jquery": "^3.2.1",
|
||||||
|
"popper.js": "^1.12.5"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
73
src/style.scss
Normal file
73
src/style.scss
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
@import "~bootstrap/scss/functions";
|
||||||
|
@import "~bootstrap/scss/mixins";
|
||||||
|
@import "~bootstrap/scss/variables";
|
||||||
|
@import "~bootstrap/scss/tables";
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table > thead > tr > td, .table > tbody > tr > td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-scrollable {
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: auto;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: col-resize;
|
||||||
|
|
||||||
|
.content span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col {
|
||||||
|
.content {
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected .content {
|
||||||
|
border: 1px solid theme-color('primary');
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.ellipsis {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-popup {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid gray;
|
||||||
|
background: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||||
|
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
@ -37,6 +37,16 @@ const config = {
|
|||||||
test: /(\.jsx|\.js)$/,
|
test: /(\.jsx|\.js)$/,
|
||||||
loader: 'eslint-loader',
|
loader: 'eslint-loader',
|
||||||
exclude: /node_modules/
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [{
|
||||||
|
loader: 'style-loader' // creates style nodes from JS strings
|
||||||
|
}, {
|
||||||
|
loader: 'css-loader' // translates CSS into CommonJS
|
||||||
|
}, {
|
||||||
|
loader: 'sass-loader' // compiles Sass to CSS
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user