NF Tables

1. Create your table

Create a HTML table as shown below. Make sure all elements shown are availible.
If elements are missing the missing ellements will be listed in the console for your review.

    <table class='nf-table' id='table1'>
        <thead>
            <tr>
                 <th>Header</th> <th>Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data </td>
                <td>data </td>
            </tr>
        </tbody>
    </table>

2. Add dependancy's

Add the stylesheet and the script to the head of your page.

    <script src="https://tables.newfeather.tech/script.js"></script>
    <link rel="stylesheet" type="text/css" href="https://tables.newfeather.tech/style.css">

3. Customize your table

Add the variables required to customize your table. The below overview is the full reference guide for all the options.
Don't copy the below, you will get a realy ugly table. Go to the Examples page to see good examples.

    <script>
        var tableOptions= {
            tableId: 'table', //add the table ID here, if this is left blank or removed the function will format all tables on the page marked with class='nf-table'
            tableTitle: true,
            tableTitleOptions: { 
                tableTitleValue: '',
                tableTitleFont: '',
                tableTitleTextColor: '',
                tableTitleFontSize: '',
                tableTitleFontWeight: '',
            },
            searchBar: true, //provide true to add a searchbar to the table if empty or missing searchbar is default not added
            searchBarOptions: {
                searchBarPlaceholder: 'Search names',
                searchBarType: 'wide', //determine the type of searchbar use wide or small as options
                searchBarBackground: 'whitesmoke',
                searchBarTextColor: 'white', 
                searchBarBorder: '3px solid black', 
                searchBarBorderBottom: '3px solid black', 
            },
            sortingEnabled: true, // enable or disable the sorting option on the columns. if empty or removed this will default to true 
            columnFiltering: true, // enable or disable the filtering on the columns 
            tableWidth: '50%', //add the width of the table in px or % if empty or removed will be 100%      
            centerTable: true, //provide true to center the table, will only work if the tableWidth element is provided
            colWidth: ['30%', '30%', '40%'], //add the width per column in px or %. If left empty or removed it will format table to make all columns the same width
            pagation: true, //provide true or false for pagation, if removed or empty will add pagation as default. 
            pagationLimit: 5, //add a custom limit for the number of items per page if empty or removed it will use default of 10 if pagation is set to true
            defaultStyle: 2, //
            tableStyle: { //set custom styling to your table here, if left empty or removed default styling will be used
                font: 'arial', //set custom font if removed or empty standard fornt will be used
                tableBackground: 'blue',
                tableShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
                tableBorder: 'black solid 2px',
                headerFont: 'arial', // set the font for the header
                headerFontSize: '30px', // set the fontsize for the header in pixles
                headerFontWeight: '200', // set the font weight for the header
                headerBackground: 'white', //provide the header background color in hex or rgb
                headerTextColor: 'black',//provide the header text color in hex or rgb
                headerBorder: 'black solid 2px',//provide the border color, width and type
                tableRowFont: 'arial', 
                tableRowFontSize: '30px',
                tableRowFontWeight: '200', 
                tableRowBackground: 'grey', //provide the data rows background color in hex or rgb
                tableRowTextColor: 'pink', //provide the data rows text color in hex or rgb
                tableRowBorder: 'black solid 2px',//provide the border color, width and type for the table rows
                pagationBackground: 'purple', //provide the pagation background color in hex or rgb
                pagationButtonBackground: 'white',//provide the background color for the pagation buttons in hex or rgb
                pagationButtonTextColor: 'blue',//provide the text color for the pagation buttons in hex or rgb
                pagationTextColor: 'white',//provide the color for the pagation text in hex or rgb

            },
        };
    </script>

4. Call the function

Call the function to generate the tables you require.

    <script>
        nfTableFomat(tableOptions);
    </script>

5. Error reporting

If you run into any issues check the console for errors. Whe have built in various error reports to help you troubleshoot the issue.