nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic search bar on table box columns

SophieCuvillier

Hello,

A frequent request is to create a sort of search bar above the table box columns, similar to what is done in other visualization software.

The aim would be to be able to very easily filter the data table on the different filters.

For example, in my example below, if I enter "Pend" in the search box on top of column "Validation status" and "Yes" in the search box on top of column "Distribution confirmation" it will filter the table given these two filters: every rows that contain "Pend" in validation status and "yes" in the other column.

I know we could use data filter, and that what I ask is really about JSL scripting, but did anyone has the same had a similar request and succeeded in generalizing the function to generate this kind of tablebox ?

Accepted answers

jthi

It isn't too complicated to create basic version of something like this but creating a robust and nice looking one will most likely get somewhat complicated. Example below is on the basic side

Names Default To Here(1);

filter_tablebox = function({tb, options}, 
	aa = Associative Array(tb << get names, options << get text);
	filter_expr = {};
	For Each({{colname, filter_text}}, aa,
		If(Is Missing(filter_text),
			continue(); // skip over
		);
		Insert Into(filter_expr, EvalExpr(Contains(Lowercase(Expr(As Name(colname))), Expr(filter_text))));
	);
	
	If(N Items(filter_expr) == 0,
		tb << Reset Filter;
		return(1);
	);
	If(N Items(filter_expr) == 1,
		filter_expr = filter_expr[1];
	,
		Substitute Into(filter_expr, Expr(List()), Expr(And()));
	);

	Eval(EvalExpr(tb << Filter Where(Expr(Name Expr(filter_expr)))));
	
	return(1);
);

nw = New Window("Example",
	ob = Outline Box("Table",
		V List Box(
			hlb = H List Box(
				Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(51)),
				Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(80)),
			),
			tb1 = Table Box(
				String Col Box("Mountain", {"K2", "Delphi", "Kilimanjaro", "Grand Teton"}),
				String Col Box("TEST", {"x", "y", "z", "a"})
			)
		)
	)
);

Names Default To Here(1); filter_tablebox = function({tb, options}, aa = Associative Array(tb << get names, options << get text); filter_expr = {}; For Each({{colname, filter_text}}, aa, If(Is Missing(filter_text), continue(); // skip over ); Insert Into(filter_expr, EvalExpr(Contains(Lowercase(Expr(As Name(colname))), Expr(filter_text)))); ); If(N Items(filter_expr) == 0, tb << Reset Filter; return(1); ); If(N Items(filter_expr) == 1, filter_expr = filter_expr[1]; , Substitute Into(filter_expr, Expr(List()), Expr(And())); ); Eval(EvalExpr(tb << Filter Where(Expr(Name Expr(filter_expr))))); return(1); ); nw = New Window("Example", ob = Outline Box("Table", V List Box( hlb = H List Box( Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(51)), Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(80)), ), tb1 = Table Box( String Col Box("Mountain", {"K2", "Delphi", "Kilimanjaro", "Grand Teton"}), String Col Box("TEST", {"x", "y", "z", "a"}) ) ) ) );

jthi

You can convert data table to table box (without fancy data table col boxes) using << get as report

Names Default To Here(1);

dt = New Table("Untitled",
	Add Rows(4),
	Compress File When Saved(1),
	New Column("Mountain",
		Character,
		"Nominal",
		Set Values({"K2", "Delphi", "Kilimanjaro", "Grand Teton"})
	),
	New Column("TEST", Character, "Nominal", Set Values({"x", "y", "z", "a"}))
);


filter_tablebox = function({tb, options}, 
	aa = Associative Array(tb << get names, options << get text);
	filter_expr = {};
	For Each({{colname, filter_text}}, aa,
		If(Is Missing(filter_text),
			continue(); // skip over
		);
		Insert Into(filter_expr, EvalExpr(Contains(Lowercase(Expr(As Name(colname))), Expr(filter_text))));
	);
	
	If(N Items(filter_expr) == 0,
		tb << Reset Filter;
		return(1);
	);
	If(N Items(filter_expr) == 1,
		filter_expr = filter_expr[1];
	,
		Substitute Into(filter_expr, Expr(List()), Expr(And()));
	);

	Eval(EvalExpr(tb << Filter Where(Expr(Name Expr(filter_expr)))));
	
	return(1);
);

nw = New Window("Example",
	ob = Outline Box("Table",
		V List Box(
			hlb = H List Box(
				Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(80)),
				Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(51)),
			),
			rep = dt << get as report; // repo is border box and under it is table box
		)
	)
);

tb1 = rep << child;
rep << Left (0);
rep << Top(0);
rep << Bottom(0);

All comments

txnelson

This is already an entry in the JMP Wish List. You can view it here

jthi

It isn't too complicated to create basic version of something like this but creating a robust and nice looking one will most likely get somewhat complicated. Example below is on the basic side

Names Default To Here(1);

filter_tablebox = function({tb, options}, 
	aa = Associative Array(tb << get names, options << get text);
	filter_expr = {};
	For Each({{colname, filter_text}}, aa,
		If(Is Missing(filter_text),
			continue(); // skip over
		);
		Insert Into(filter_expr, EvalExpr(Contains(Lowercase(Expr(As Name(colname))), Expr(filter_text))));
	);
	
	If(N Items(filter_expr) == 0,
		tb << Reset Filter;
		return(1);
	);
	If(N Items(filter_expr) == 1,
		filter_expr = filter_expr[1];
	,
		Substitute Into(filter_expr, Expr(List()), Expr(And()));
	);

	Eval(EvalExpr(tb << Filter Where(Expr(Name Expr(filter_expr)))));
	
	return(1);
);

nw = New Window("Example",
	ob = Outline Box("Table",
		V List Box(
			hlb = H List Box(
				Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(51)),
				Text Edit Box("", << Set Script(filter_tablebox(tb1, hlb << XPath("//TextEditBox"))), << Set Width(80)),
			),
			tb1 = Table Box(
				String Col Box("Mountain", {"K2", "Delphi", "Kilimanjaro", "Grand Teton"}),
				String Col Box("TEST", {"x", "y", "z", "a"})
			)
		)
	)
);

SophieCuvillier

Thank you very much, that's exactly it! The basic version already solves my problem, it's perfect.

SophieCuvillier

Just by curiosity, would it be possible to work also with a data table box ?

jthi

If Table Box is using Data Table Col Boxes it doesn't seem to support Filter Where anymore which would prevent you from using this. What is the reasoning for using Data Table Box? Do you wish to have the capability of row selection which is linked to the original table or something else?

SophieCuvillier

It's just that with the data table box, I had the data table directly, whereas with the table box, I had to convert my table into a table box. And indeed I had tried to adjust your script for data table but I got stuck on the filter where I didn't know if it was me who was doing it wrong.

All comments

Quick Links