🕷️ Crawler Inspector

[ Tabulator](https://tabulator.info/) - [Documentation](https://tabulator.info/docs/6.4) - [Examples](https://tabulator.info/examples/6.4) - [News](https://tabulator.info/news/) - [Community](https://tabulator.info/community/) [Version 6.4 Released! Click to checkout the new features](https://tabulator.info/docs/6.3/release) - [Documentation](https://tabulator.info/docs/6.4) - [Examples](https://tabulator.info/examples/6.4) - [News](https://tabulator.info/news/) - [Community](https://tabulator.info/community/)  # Tabulator ## Easy to use, simple to code, fully featured, interactive JavaScript tables and data grids [Download v6.4](https://github.com/olifolkerd/tabulator/archive/master.zip) ### HTML ``` <div id="example-table"></div> ``` ### JavaScript - Simple Table ``` //define data array var tabledata = [ {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1}, {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true}, {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"}, {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"}, {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"}, {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1}, ]; //initialize table var table = new Tabulator("#example-table", { data:tabledata, //assign data to table autoColumns:true, //create columns from data field names }); ``` ### JavaScript - Feature Rich Table ``` var table = new Tabulator("#example-table", { data:tabledata, //load row data from array layout:"fitColumns", //fit columns to width of table responsiveLayout:"hide", //hide columns that don't fit on the table addRowPos:"top", //when adding a new row, add it to the top of the table history:true, //allow undo and redo actions on the table pagination:"local", //paginate the data paginationSize:7, //allow 7 rows per page of data paginationCounter:"rows", //display count of paginated rows in footer movableColumns:true, //allow column order to be changed initialSort:[ //set the initial sort order of the data {column:"name", dir:"asc"}, ], columnDefaults:{ tooltip:true, //show tool tips on cells }, columns:[ //define the table columns {title:"Name", field:"name", editor:"input"}, {title:"Task Progress", field:"progress", hozAlign:"left", formatter:"progress", editor:true}, {title:"Gender", field:"gender", width:95, editor:"list", editorParams:{values:["male", "female"]}}, {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100, editor:true}, {title:"Color", field:"col", width:130, editor:"input"}, {title:"Date Of Birth", field:"dob", width:130, sorter:"date", hozAlign:"center"}, {title:"Driver", field:"car", width:90, hozAlign:"center", formatter:"tickCross", sorter:"boolean", editor:true}, ], }); ``` ## Cross Browser Support ### Tabulator supports all major browsers      Tabulator is built to support all modern desktop and mobile web browsers ## Framework Support ### Tabulator works on all JS frameworks, including: Tabulator is a plain JavaScript library and can be used on all frontend JavaScript Frameworks The documentation section contains a [Framework Setup Guide](https://tabulator.info/docs/6.4/frameworks) to get you started ## Extensive Feature Set ### Configure your tables to meet the needs of your users Tabulator has an enormous number of features to help customize your table experience to your needs With new features released every month, there is bound to be something to get your interactive table juices flowing A detailed breakdown of all of the available features can be found in the [Documentation](https://tabulator.info/docs) [Filters Filter data to display only what you need to](https://tabulator.info/docs/6.4/filter) [Sorting Sort data however you like, by any value or data type](https://tabulator.info/docs/6.4/sort) [Formatting Create custom formatters to graphically display data](https://tabulator.info/docs/6.4/format) [Grouping Graphically group rows by any specified data](https://tabulator.info/docs/6.4/group) [Ajax Asynchronously load data into your table via Ajax requests](https://tabulator.info/docs/6.4/data#ajax) [Editing Edit table data directly in the table. Then return the result](https://tabulator.info/docs/6.4/edit) [Callbacks Interact with Tabulator through a selection of callbacks](https://tabulator.info/docs/6.4/callbacks) [Virtual DOM Lightning fast rendering of large data sets using a virtualized DOM](https://tabulator.info/docs/6.4/virtual-dom) [CSS Styling All graphical elements are assigned classes for full CSS styling](https://tabulator.info/docs/6.4/style) [Pagination Automatic local and remote data pagination](https://tabulator.info/docs/6.4/page) [Packaged Themes Five Prepackaged themes straight out the box](https://tabulator.info/docs/6.4/theme) [Mutators Alter data as it enters and leaves the table](https://tabulator.info/docs/6.4/mutators) [Accessibility Aria tags are used on all elements for enhanced readability](https://tabulator.info/docs/6.4/accessibility) [Freeze Data Freeze columns and rows in place while scrolling](https://tabulator.info/docs/6.4/layout#frozen) [Row Selection Select single or multiple rows with the mouse](https://tabulator.info/docs/6.4/select) [Localization Localize the content of your tables to multiple languages](https://tabulator.info/docs/6.4/localize) [Download Data Download data directly from the table to a CSV or XLSX File](https://tabulator.info/docs/6.4/download) [Layout Customise the layout of Tabulator to meet your needs](https://tabulator.info/docs/6.4/layout) [Key Bindings Customisable keyboard shortcuts for table interaction](https://tabulator.info/docs/6.4/keybindings) [Responsive Layout Automatically hide & show data to fit table size](https://tabulator.info/docs/6.4/layout#responsive) [Persistent Configuration Remember layout, sort and filter config between visits](https://tabulator.info/docs/6.4/persist) [History Record user interactions and Undo or Redo actions](https://tabulator.info/docs/6.4/history) [Navigation Navigate focus around the table with keyboard and functions](https://tabulator.info/docs/6.4/navigation) [Column Calculations Calculate max, min, avg, & sum values from column data](https://tabulator.info/docs/6.4/column-calcs) [Input Validation Validate user input before storing it in the table](https://tabulator.info/docs/6.4/validate) [Clipboard Copy and Paste data from the table to the clipboard](https://tabulator.info/docs/6.4/clipboard) [Connected Tables Move rows between multiple connected tables](https://tabulator.info/docs/6.4/move#rows-table) [Tree Structure Structure data as tree with clickable nodes](https://tabulator.info/docs/6.4/tree) [Reactive Data The table updates when your data does](https://tabulator.info/docs/6.4/tree) [Touch Friendly Fully functional on mobile touch devices](https://tabulator.info/docs/6.4/tree) [Print Styling Custom print styling and full page printing](https://tabulator.info/docs/6.4/print) [Menus Context menus for rows, columns and cells](https://tabulator.info/docs/6.4/menu) [RTL Text Direction Full support for right to left text direction](https://tabulator.info/docs/6.4/layout#rtl) [Spreadsheets Multi-sheet spreadsheet mangement](https://tabulator.info/docs/6.4/spreadsheet) [Cell Range Selection Selection of multiple cell ranges](https://tabulator.info/docs/6.4/range) [File Importing Import content direct from xlsx, csv & ods files](https://tabulator.info/docs/6.4/data#import-file) [Donate](https://tabulator.info/community/support "Donate to support Tabulator") *Copyright © Oli Folkerd 2016 - 2026*

### HTML ``` <div id="example-table"></div> ``` ### JavaScript - Simple Table ``` //define data array var tabledata = [ {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1}, {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true}, {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"}, {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"}, {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"}, {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1}, ]; //initialize table var table = new Tabulator("#example-table", { data:tabledata, //assign data to table autoColumns:true, //create columns from data field names }); ``` ### JavaScript - Feature Rich Table ``` var table = new Tabulator("#example-table", { data:tabledata, //load row data from array layout:"fitColumns", //fit columns to width of table responsiveLayout:"hide", //hide columns that don't fit on the table addRowPos:"top", //when adding a new row, add it to the top of the table history:true, //allow undo and redo actions on the table pagination:"local", //paginate the data paginationSize:7, //allow 7 rows per page of data paginationCounter:"rows", //display count of paginated rows in footer movableColumns:true, //allow column order to be changed initialSort:[ //set the initial sort order of the data {column:"name", dir:"asc"}, ], columnDefaults:{ tooltip:true, //show tool tips on cells }, columns:[ //define the table columns {title:"Name", field:"name", editor:"input"}, {title:"Task Progress", field:"progress", hozAlign:"left", formatter:"progress", editor:true}, {title:"Gender", field:"gender", width:95, editor:"list", editorParams:{values:["male", "female"]}}, {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100, editor:true}, {title:"Color", field:"col", width:130, editor:"input"}, {title:"Date Of Birth", field:"dob", width:130, sorter:"date", hozAlign:"center"}, {title:"Driver", field:"car", width:90, hozAlign:"center", formatter:"tickCross", sorter:"boolean", editor:true}, ], }); ```