Display

A popular configuration option for components like tables is to be able to make a group of fields visible or hidden without having to actually remove them from the data.

Hide

In the example below, the UserId field will not be visible in the table using the hide configuration option.

const users = [
    { UserId: 3003, UserName: "jkratz", FullName: "Jamie Kratz" },
    { UserId: 2408, UserName: "pdougherty", FullName: "Pat Dougherty" }
];

const table = new wire.bsTable().render("#table", {
    data: users,
    hide: ["UserId"]
});

Select

The same results can be achieved by listing the fields to be displayed instead using the select configuration option. Depending on how many fields there are in the data and how many need to be hidden or displayed, one or the other option would work best.

const users = [
    { UserId: 3003, UserName: "jkratz", FullName: "Jamie Kratz" },
    { UserId: 2408, UserName: "pdougherty", FullName: "Pat Dougherty" }
];

const table = new wire.bsTable().render("#table", {
    data: users,
    select: ["UserName", "FullName"]
});

The select configuration option can also be set up as a comma delimited string of fields consistent with how columns are selected from data tables or table queries.

const users = [
    { UserId: 3003, UserName: "jkratz", FullName: "Jamie Kratz" },
    { UserId: 2408, UserName: "pdougherty", FullName: "Pat Dougherty" }
];

const table = new wire.bsTable().render("#table", {
    data: users,
    select: "UserName, FullName"
});

Spinner

By default components will display a spinner when refreshing its UI. To turn this off, use the spinner configuration option. See Spinners for details.

const table = new wire.bsTable().render("#table", {
    ...
    spinner: false
});