implement webform list using Datatable

frappe/public/build.json

@@ -9,7 +9,8 @@
 		"public/less/form.less",
 		"public/less/controls.less",
 		"public/less/chat.less",
-		"public/less/form_grid.less"
+		"public/less/form_grid.less",
+		"node_modules/frappe-datatable/dist/frappe-datatable.css"
 	],
 	"concat:js/moment-bundle.min.js": [
 		"node_modules/moment/min/moment-with-locales.min.js",

frappe/website/doctype/web_form/templates/web_form.html

@@ -62,8 +62,12 @@
 	</p>
 </div>
 {% elif is_list %}
-	{% include "templates/includes/list/list.html" %}
-	<script>{% include "templates/includes/list/list.js" %}</script>
+	<div class="web-form-list">
+		<div class="results"></div>
+		<div class="more-block {% if not show_more -%} hide {%- endif %}">
+			<button class="btn btn-default btn-more btn-sm">{{ _("More") }}</button>
+		</div>
+	</div>
 {% else %}
 <br>
 
@@ -180,7 +184,7 @@ window.web_form_settings = {
 	login_required: 	{{ 1 if login_required else 0 }},
 	max_attachment_size:{{ max_attachment_size }},
 	moment_date_format: "{{ frappe.date_format.upper() }}",
-	is_list: {{ frappe.utils.cint(is_list) }},
+	is_list: {{ frappe.utils.cint(is_list) }}
 }
 {% if row_template %}web_form_settings.web_form_row_template = "{{ row_template }}";{% endif %}
 </script>

frappe/website/doctype/web_form/web_form.py

@@ -508,3 +508,7 @@ def get_form_data(doctype, docname, web_form_name):
 	out.links = links
 
 	return out
+
+@frappe.whitelist()
+def get_in_list_view_fields(doctype):
+	return [df.as_dict() for df in frappe.get_meta(doctype).fields if df.in_list_view]

frappe/website/js/web_form.js

@@ -1,8 +1,10 @@
 import WebForm from './webform';
+import DataTable from 'frappe-datatable';
 
 frappe.ready(function() {
 	if(web_form_settings.is_list) {
-		$('body').css('display', 'block');
+		$('body').show();
+		make_datatable('.web-form-list .results', web_form_settings.web_form_doctype);
 		return;
 	}
 
@@ -159,4 +161,52 @@ frappe.ready(function() {
 	});
 });
 
+window.web_list_start = 0;
+window.web_list_page_length = 20;
+window.web_list_datatable;
 
+
+window.make_datatable = function make_datatable(container, doctype) {
+	return new Promise(resolve => {
+		frappe.call({
+			method: 'frappe.website.doctype.web_form.web_form.get_in_list_view_fields',
+			args: { doctype },
+			callback: (r) => {
+				const docfields = r.message;
+
+				frappe.call({
+					method: 'frappe.client.get_list',
+					args: { doctype, fields: docfields.map(df => df.fieldname) },
+					callback: (r) => {
+						const data = r.message || [];
+
+						window.web_list_datatable = new DataTable(container, {
+							columns: docfields.map(df => ({ name: df.label, id: df.fieldname })),
+							data,
+							layout: 'fluid'
+						});
+
+						$(".web-form-list .btn-more").on('click', () => {
+							window.web_list_start += window.web_list_page_length;
+							frappe.call({
+								method: 'frappe.client.get_list',
+								args: {
+									doctype,
+									fields: docfields.map(df => df.fieldname),
+									limit_start: window.web_list_start
+								},
+								callback: (r) => {
+									const data = r.message || [];
+
+									window.web_list_datatable.appendRows(data);
+								}
+							});
+						});
+
+						resolve(window.web_list_datatable);
+					}
+				});
+			}
+		});
+	});
+}

frappe/www/list.py

@@ -2,7 +2,7 @@
 # MIT License. See license.txt
 
 from __future__ import unicode_literals
-import frappe
+import frappe, json
 from frappe.utils import cint, quoted
 from frappe.website.render import resolve_path
 from frappe.model.document import get_controller, Document
@@ -86,10 +86,13 @@ def get(doctype, txt=None, limit_start=0, limit=20, **kwargs):
 		rendered_row = frappe.render_template(row_template, new_context, is_path=True)
 		result.append(rendered_row)
 
+	from frappe.utils.response import json_handler
+
 	return {
+		"raw_result": json.dumps(raw_result, default=json_handler),
 		"result": result,
 		"show_more": show_more,
-		"next_start": next_start
+		"next_start": next_start,
 	}
 
 def set_route(context):