How we can add ColumnPicker on custom table?

Example:
I have created a custom child table on production order page. We need to add ColumnPicker for this.

Create Custom Field in Production Order doctype, set Type = Link, Options = Your Child Table Name

Thanks for reply @magic-overflow

We need this type of ColumnPicker

@magic-overflow
Did you understand my requirement?

when you create report as report_type = Report Builder, It’s automatically have this button to pick the columns.

Where do you want to have this Pick Columns, in list or report?

@magic-overflow I have added ‘Pick Columns’ button on production order page, When we click on this button we need column picker popup on production order page not report page.
How we can do that?

@magic-overflow Can you talk on this link(https://appear.in/erpsap)
We can share screen and chat both in this site

You can check the below file, it may help.

@magic-overflow
I already use this code but I am unable integrate with production order create page

How we can write below script for production page.

frappe.views.ReportViewPage = Class.extend({
make_column_picker: function() {
var me = this;
this.column_picker = new frappe.ui.ColumnPicker(this);
this.page.add_inner_button(__(‘Pick Columns’), function() {
me.column_picker.show(me.columns);
});
},
});

If you just want to have modal (pop-up) with simple select options, you can try script below.

//create modal with a field as HTML
var d = new frappe.ui.Dialog({
title: __(“Pick Column”),
fields: [
{fieldname:‘columns’, fieldtype:‘HTML’, label: __(‘Columns’)}
]
});

//select field and empty the content
var $wrapper = $(“div[data-fieldname=‘columns’]”).empty();

//add content as HTML
$wrapper.html(your_picking_columns_as_html);

//show modal
d.show();