Redesign docs page
- reorganize files into assets folder - initialize base layout
This commit is contained in:
Faris Ansari
parent
8509df7093
commit
1f6174b232
159
docs/assets/css/index.css
Normal file
159
docs/assets/css/index.css
Normal file
@ -0,0 +1,159 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
|
||||
|
||||
:root {
|
||||
--border-color: #d1d8dd;
|
||||
--border: 1px solid var(--border-color);
|
||||
--text-color: #36414C;
|
||||
--navbar-font-size: 1.25rem;
|
||||
--light-bg: #f5f7fa;
|
||||
--primary-color: #7575ff;
|
||||
--primary-color-hover: #5b5be5;
|
||||
}
|
||||
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 2rem 0 4rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-links a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: var(--navbar-font-size);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 8rem;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
max-width: 3rem;
|
||||
max-height: 3rem;
|
||||
padding: 0.5rem;
|
||||
background-color: #fff;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.padding-1 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.showcase {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
.showcase.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 1.25rem;
|
||||
margin-top: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.features ul {
|
||||
padding-left: 2rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
[class^="example-"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
padding: 2rem;
|
||||
border-left: 2px solid var(--border-color);
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
color: #fff;
|
||||
background-color: var(--primary-color);
|
||||
border: 0px;
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
/* .data-table-header {
|
||||
background: #f7fafc;
|
||||
color: #8d99a6;
|
||||
} */
|
||||
|
||||
22
docs/assets/img/data-table-logo.svg
Normal file
22
docs/assets/img/data-table-logo.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="no"?>
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="340.42303" height="330.00024" viewBox="0 0 90.070259 87.312561" version="1.1" id="svg3970" inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||
<defs id="defs3964"/>
|
||||
|
||||
<metadata id="metadata3967">
|
||||
|
||||
</metadata>
|
||||
<g inkscape:label="Layer 1" id="layer1" transform="translate(-7.1255851,-173.21277)">
|
||||
<rect transform="scale(-1,1)" ry="13.229167" rx="13.229167" y="173.21277" x="-94.438156" height="87.312546" width="87.312553" id="rect2004" style="opacity:1;fill:#edfdff;fill-opacity:1;stroke:none;stroke-width:1.74624979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;"/>
|
||||
<path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 0 96.25 L 0 151.25 L 77.5 151.25 C 80.27 151.25 82.5 149.02 82.5 146.25 L 82.5 101.25 C 82.5 98.48 80.27 96.25 77.5 96.25 L 0 96.25 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2006"/>
|
||||
<path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 50 0 C 22.299998 0 1.4210855e-14 22.299998 0 50 L 0 54.5 L 78 54.5 C 80.77 54.5 83 52.27 83 49.5 L 83 4.5 C 83 2.503655 81.832377 0.80274423 80.148438 0 L 50 0 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2008"/>
|
||||
<rect style="opacity:1;fill:#71caff;fill-opacity:1;stroke:none;stroke-width:1.74624979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" id="rect2010" width="57.195782" height="14.552094" x="40.000061" y="198.74506" ry="1.3229167" rx="1.3229166"/>
|
||||
<path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 0 193 L 0 248 L 77.5 248 C 80.27 248 82.5 245.77 82.5 243 L 82.5 198 C 82.5 195.23 80.27 193 77.5 193 L 0 193 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2012"/>
|
||||
<path style="fill:#87e34c;fill-opacity:1;stroke:none;stroke-width:1.00000012px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" clip-path="none" d="M 0 219.61328 L 0 284.29688 C 0 309.61626 27.643317 330 61.980469 330 L 268.01953 330 C 300.54576 330 327.04905 311.70603 329.75586 288.25586 L 330 248.5 C 256.7254 233.20714 83.19117 220.5514 0 219.61328 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="path2020"/>
|
||||
<path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 129.25 193.5 C 126.48 193.5 124.25 195.73 124.25 198.5 L 124.25 243.5 C 124.25 246.27 126.48 248.5 129.25 248.5 L 330 248.5 L 330 193.5 L 129.25 193.5 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2014"/>
|
||||
<path style="opacity:1;fill:#c3f1ff;fill-opacity:1;stroke:none;stroke-width:6.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 127.10156 0 C 125.41762 0.80274423 124.25 2.503655 124.25 4.5 L 124.25 49.5 C 124.25 52.27 126.48 54.5 129.25 54.5 L 330 54.5 L 330 50 C 330 22.299998 307.7 0 280 0 L 127.10156 0 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect2016"/>
|
||||
<path style="opacity:1;fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 129.25 290.5 C 126.48 290.5 124.25 292.73 124.25 295.5 L 124.25 330 L 280 330 C 304.09518 330 324.09664 313.12363 328.89648 290.5 L 129.25 290.5 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect1135"/>
|
||||
<path style="opacity:1;fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:6.59999943;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="M 0.94921875 289.75 C 5.4614968 312.74994 25.639123 330 50 330 L 82.5 330 L 82.5 294.75 C 82.5 291.98 80.27 289.75 77.5 289.75 L 0.94921875 289.75 z " transform="matrix(0.26458332,0,0,0.26458332,7.1255851,173.21277)" id="rect1139"/>
|
||||
<path style="opacity:1;fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:1.74624979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" clip-path="none" d="m 7.1257773,231.31877 v 7.51065 H 27.630987 c 0.732896,0 1.322917,-0.59002 1.322917,-1.32292 v -5.36505 C 20.620295,231.67818 13.007809,231.3851 7.1257773,231.31877 Z" id="path1264"/>
|
||||
<path style="fill:#59b81c;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" clip-path="none" d="m 40.000259,232.82824 v 4.81056 c 0,0.73289 0.59002,1.32291 1.322916,1.32291 h 53.115108 c -11.982795,-2.50088 -34.095004,-4.73297 -54.438024,-6.13347 z" id="path1163"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
46
docs/assets/img/frappe-bird-grey.svg
Normal file
46
docs/assets/img/frappe-bird-grey.svg
Normal file
@ -0,0 +1,46 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 260 260"
|
||||
version="1.1"
|
||||
xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
|
||||
id="svg16"
|
||||
sodipodi:docname="frappe-bird-grey.svg"
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
|
||||
id="metadata22"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs20" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1029"
|
||||
id="namedview18"
|
||||
showgrid="false"
|
||||
inkscape:snap-global="false"
|
||||
inkscape:zoom="2.5673415"
|
||||
inkscape:cx="125.36812"
|
||||
inkscape:cy="132.66533"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg16" /><path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path846"
|
||||
d="m 39.426993,41.26578 c -0.08308,-0.002 -0.162537,0.01476 -0.244177,0.01847 -0.195406,-0.01104 -0.394663,-0.0078 -0.595581,0.02219 -0.671494,0.09826 -1.359798,0.439289 -1.985268,1.097637 L 36.166705,42.984362 3.911539,86.00785 c -1.4521873,1.95837 -0.089029,5.089411 2.840468,4.758942 l 35.051779,-4.999463 7.486826,52.499391 c 0.143332,1.06941 0.708175,1.87792 1.45651,2.37853 0.06099,0.57446 0.300326,1.15825 0.786491,1.67605 l 54.221237,55.16042 c 0.35241,0.34946 0.76163,0.57974 1.18925,0.71967 l 43.2449,43.9932 c 2.19797,2.06517 5.73881,0.59111 5.73827,-2.44537 l 0.72154,-88.30898 100.76861,-99.226182 c 2.03273,-1.933848 0.52846,-5.096585 -1.98911,-5.01476 L 146.21842,46.315471 c -1.15721,-0.0078 -1.82288,0.589677 -2.08644,0.84183 L 70.489255,119.67376 95.234723,86.666413 c 1.320352,-1.808803 0.561745,-3.846193 -0.6872,-4.787579 L 41.349464,41.92492 C 40.706305,41.485816 40.049657,41.2839 39.427179,41.266357 Z"
|
||||
style="fill:#29344a;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,69 +0,0 @@
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.padding-1 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.installation .code {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.showcase {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.showcase p {
|
||||
font-size: 2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
[class^="example-"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.code {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.data-table-header {
|
||||
background: #f7fafc;
|
||||
color: #8d99a6;
|
||||
}
|
||||
@ -7,40 +7,40 @@ const {
|
||||
} = getSampleData();
|
||||
|
||||
// Hero
|
||||
let datatable1 = new DataTable('.example-1 .target', {
|
||||
let datatable1 = new DataTable('.example-1', {
|
||||
columns,
|
||||
data,
|
||||
checkboxColumn: true
|
||||
});
|
||||
|
||||
// Formatted Cells
|
||||
let datatable2 = new DataTable('.example-2', {
|
||||
columns: ['Name', 'Position', 'Office', 'Extn.', 'Start Date',
|
||||
{ content: 'Salary', format: val => '$' + val, align: 'right' }],
|
||||
data
|
||||
});
|
||||
// // Formatted Cells
|
||||
// let datatable2 = new DataTable('.example-2', {
|
||||
// columns: ['Name', 'Position', 'Office', 'Extn.', 'Start Date',
|
||||
// { content: 'Salary', format: val => '$' + val, align: 'right' }],
|
||||
// data
|
||||
// });
|
||||
|
||||
// Inline Filters
|
||||
let datatable3 = new DataTable('.example-3', {
|
||||
columns,
|
||||
data,
|
||||
enableInlineFilters: true
|
||||
});
|
||||
datatable3.showToastMessage('Click on a cell and press Ctrl/Cmd + F');
|
||||
// // Inline Filters
|
||||
// let datatable3 = new DataTable('.example-3', {
|
||||
// columns,
|
||||
// data,
|
||||
// enableInlineFilters: true
|
||||
// });
|
||||
// datatable3.showToastMessage('Click on a cell and press Ctrl/Cmd + F');
|
||||
|
||||
// Keyboard
|
||||
let datatable4 = new DataTable('.example-4', {
|
||||
columns,
|
||||
data
|
||||
});
|
||||
datatable4.showToastMessage('Double click to edit');
|
||||
// // Keyboard
|
||||
// let datatable4 = new DataTable('.example-4', {
|
||||
// columns,
|
||||
// data
|
||||
// });
|
||||
// datatable4.showToastMessage('Double click to edit');
|
||||
|
||||
// Tree Structured Rows
|
||||
let datatable5 = new DataTable('.example-5', getTreeData());
|
||||
datatable5.showToastMessage('Expand/Collapse tree nodes');
|
||||
// // Tree Structured Rows
|
||||
// let datatable5 = new DataTable('.example-5', getTreeData());
|
||||
// datatable5.showToastMessage('Expand/Collapse tree nodes');
|
||||
|
||||
function getSampleData(multiplier) {
|
||||
let columns = ['Name', 'Position', 'Office', {name: 'Extn.', width: 75}, 'Start Date', 'Salary'];
|
||||
let columns = ['Name', 'Position', 'Office', {name: 'Extn.', width: 120}, 'Start Date', 'Salary'];
|
||||
let data = [
|
||||
['Tiger Nixon', 'System Architect', 'Edinburgh', 5421, '2011/04/25', '320,800'],
|
||||
['Garrett Winters', 'Accountant', 'Tokyo', 8422, '2011/07/25', '170,750'],
|
||||
194
docs/index.html
194
docs/index.html
@ -5,66 +5,107 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Frappe DataTable - A simple, modern datatable library for the web</title>
|
||||
<link href="assets/frappe-datatable.css" rel="stylesheet">
|
||||
<link href="assets/hljs-default.css" rel="stylesheet">
|
||||
<link href="assets/index.css" rel="stylesheet">
|
||||
<link href="assets/css/frappe-datatable.css" rel="stylesheet">
|
||||
<link href="assets/css/hljs-default.css" rel="stylesheet">
|
||||
<link href="assets/css/index.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero showcase">
|
||||
<h1>Frappe DataTable</h1>
|
||||
<p>A simple, modern and interactive datatable for the web</p>
|
||||
<div class="example-1">
|
||||
<div class="target"></div>
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<h3>Frappe DataTable</h3>
|
||||
<div class="navbar-links">
|
||||
<a href="https://github.com/frappe/datatable">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="showcase">
|
||||
<h2>Format Cells</h2>
|
||||
<p>Show custom formatted cells based on context</p>
|
||||
<div class="example-2"></div>
|
||||
</section>
|
||||
<section class="showcase">
|
||||
<h2>Inline Filters</h2>
|
||||
<p>Filter rows based on search text per column</p>
|
||||
<div class="example-3"></div>
|
||||
</section>
|
||||
<section class="showcase">
|
||||
<h2>Keyboard Navigation</h2>
|
||||
<p>Full Keyboard Navigation support</p>
|
||||
<div class="example-4"></div>
|
||||
</section>
|
||||
<section class="showcase">
|
||||
<h2>Tree Structure</h2>
|
||||
<p>Show tree structured rows in your table</p>
|
||||
<div class="example-5"></div>
|
||||
</section>
|
||||
<section class="showcase installation">
|
||||
<h2>Installation</h2>
|
||||
<div class="code">
|
||||
<pre><code>// Install using yarn
|
||||
yarn add frappe-datatable
|
||||
</nav>
|
||||
<div class="container">
|
||||
|
||||
// or npm
|
||||
npm install frappe-datatable</code></pre>
|
||||
</section>
|
||||
<section class="showcase installation">
|
||||
<h2>Usage</h2>
|
||||
<div class="code">
|
||||
<pre><code> let datatable = new DataTable({
|
||||
columns: ['Name', 'Position', ...],
|
||||
data: [
|
||||
['Tiger Nixon', 'System Architect', ...],
|
||||
['Garrett Winters', 'Accountant', ...],
|
||||
...
|
||||
]
|
||||
})
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
<section class="showcase installation">
|
||||
<h2>List of configurable options</h2>
|
||||
<div class="code">
|
||||
<pre><code>{
|
||||
<section class="showcase align-center">
|
||||
<img class="logo" src="assets/img/data-table-logo.svg" />
|
||||
<h1 class="text-center">A simple, modern and interactive<br> datatable for the web</h1>
|
||||
<div class="example-1"></div>
|
||||
</section>
|
||||
|
||||
<section class="showcase installation">
|
||||
<h3>Installation</h3>
|
||||
<div class="code">
|
||||
<pre><code class="shell"># Install using yarn
|
||||
$ yarn add frappe-datatable
|
||||
|
||||
# or npm
|
||||
$ npm install frappe-datatable</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="showcase installation">
|
||||
<h3>Usage</h3>
|
||||
<div class="code">
|
||||
<pre><code>import DataTable from 'frappe-datatable';
|
||||
|
||||
// or add
|
||||
// <script src="frappe-datatable.js" ></script>
|
||||
// in your html
|
||||
|
||||
let datatable = new DataTable({
|
||||
columns: ['Name', 'Position', ...],
|
||||
data: [
|
||||
['Tiger Nixon', 'System Architect', ...],
|
||||
['Garrett Winters', 'Accountant', ...],
|
||||
...
|
||||
]
|
||||
});</code></pre>
|
||||
</section>
|
||||
<section class="showcase feature">
|
||||
<h3>Cell Features</h3>
|
||||
<div class="features">
|
||||
<ul>
|
||||
<li>Custom Formatters</li>
|
||||
<li>Inline Editing</li>
|
||||
<li>Mouse Selection</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Copy Cells</li>
|
||||
<li>Keyboard Navigation</li>
|
||||
<li>Custom Cell Editor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="showcase feature">
|
||||
<h3>Column Features</h3>
|
||||
<div class="features">
|
||||
<ul>
|
||||
<li>Reorder Columns</li>
|
||||
<li>Sort by Column</li>
|
||||
<li>Remove / Hide Column</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Custom Actions</li>
|
||||
<li>Resize Column</li>
|
||||
<li>Flexible Layout</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="showcase feature">
|
||||
<h3>Row Features</h3>
|
||||
|
||||
<div class="features">
|
||||
<ul>
|
||||
<li>Row Selection</li>
|
||||
<li>Tree Structured Rows</li>
|
||||
<li>Inline Filters</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Large Number of Rows</li>
|
||||
<li>Dynamic Row Height</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="showcase installation">
|
||||
<h3>List of configurable options</h3>
|
||||
<div class="code">
|
||||
<pre><code>{
|
||||
columns: [],
|
||||
data: [],
|
||||
dropdownButton: '▼',
|
||||
@ -102,25 +143,30 @@ npm install frappe-datatable</code></pre>
|
||||
noDataMessage: 'No Data',
|
||||
cellHeight: null,
|
||||
enableInlineFilters: false
|
||||
};</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section class="showcase">
|
||||
<div class="padding-1">
|
||||
<a href="https://github.com/frappe/datatable">View on GitHub</a>
|
||||
</div>
|
||||
<div class="padding-1">
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="showcase">
|
||||
<section>Made with ❤️ by Frappe</section>
|
||||
}</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section class="showcase align-center">
|
||||
<p>
|
||||
<button class="download-button">Download</button>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/frappe/datatable">View on GitHub</a>
|
||||
</p>
|
||||
<p>
|
||||
<span>MIT License</span>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="showcase align-center">
|
||||
<img class="footer-logo" src="assets/img/frappe-bird-grey.svg" alt="Frappe Logo">
|
||||
<section>Made with ❤️ by <a>Frappe</a></section>
|
||||
</footer>
|
||||
<script src="assets/clusterize.min.js"></script>
|
||||
<script src="assets/Sortable.min.js"></script>
|
||||
<script src="assets/highlight.pack.js"></script>
|
||||
<script src="assets/js/clusterize.min.js"></script>
|
||||
<script src="assets/js/Sortable.min.js"></script>
|
||||
<script src="assets/js/highlight.pack.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script src="assets/frappe-datatable.js"></script>
|
||||
<script src="assets/index.js"></script>
|
||||
<script src="assets/js/frappe-datatable.js"></script>
|
||||
<script src="assets/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user