Auto width of columns in a table

Table columns can be dynamically hidden at preview time by setting the Visibility.Hidden property to an expression that depends on the report parameter values or other runtime variables. In that case, other columns can automatically resize to take up the available space. This report shows a table with five columns, three of which can be hidden by setting the corresponding parameter values. Try hiding one, two, or all three columns and notice that the table width does not change because the remaining columns take up the available space.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJS sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/resource/common/report-sample-style.css"
/>
<script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
<script src="$DEMOROOT$/lib/purejs/license.js"></script>
<script>
function onLoad() {
// var paramsOpened = false;
initReportSample(
"viewer-host",
"designer-host",
"ColumnAutoWidth.rdlx-json",
"Columns Auto Width",
function (viewer) {
viewer.showParametersOnOpen = "always";
// viewer.documentLoaded.register(function () {
//   var paramsBtn = document.querySelector(
//     'button[title="Parameters"]'
//   );
//   console.log(paramsBtn);
//   if (paramsBtn && !paramsOpened) {
//     paramsBtn.click();
//     paramsOpened = true;
//   }
// });
}
);
}
</script>
</head>
<body onload="onLoad()">
<div id="root">
<div id="viewer-host"></div>
<div id="designer-host"></div>
</div>
</body>
</html>