Create a partial view in MVC c# that use a Javascript object with some parameter

I need to create a Partial View where I render a table created with the Tabulator.js library. The problem is that each table (Table Partial View) has different settings passed by javascript on table creation.
In my case a page (View) can contain more than one table. For that reason I’m look for a solution to use multiple partial view in one page, each with different settings (provided by the modelview) but with a single javascript that handle everything.

Currently I created a working table in a single View, which is created using all information provided by the ModelView.

Here i create the javascript object (the table) – I need to find a solution to pass the Column setting in another way, because each table could have different settings

        var table = new Tabulator("#example-table", {
            layout: "fitColumns", 
            columns: @Html.Raw(Model.TableComponent.GetAllTableSettings()),
        });

And here is the HTML generate by the View using the data passed by the ModelView

<table id="example-table">
        <thead>
            <tr>
                @foreach (var header in Model.TableComponent.TableHeaders)
                {
                    <th>@header.ColumnName</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach (var school in Model.TableComponent.Data)
            {
                <tr>
                    @foreach (var header in Model.TableComponent.TableHeaders)
                    {
                        <td>@Model.TableComponent.GetPropertyValueByPropertyName(school, header.FieldName)</td>
                    }
                </tr>
            }
        </tbody>
    </table>

Example of setting:

{title: 'IdSchool', field: 'IdSchool', editor: false, headerFilter: true}
{title: 'IdSchoolType', field: 'IdSchoolType', editor: true, headerFilter: false}
{title: 'IdCountry', field: 'IdCountry', editor: true, headerFilter: true}
{title: 'Town', field: 'Town', editor: true, headerFilter: true}
{title: 'SchoolName', field: 'SchoolName', editor: true, headerFilter: true}
{title: 'UstCode', field: 'UstCode', editor: true, headerFilter: true}

In a nutshell, how can I pass the settings to JS file for each table through the ViewModel, do I have to set it inside the DOM?