GithubHelp home page GithubHelp logo

dhobi / datatables.colresize Goto Github PK

View Code? Open in Web Editor NEW
43.0 5.0 25.0 29 KB

Column resizing plug-in for DataTables

License: MIT License

CSS 0.96% JavaScript 60.87% HTML 38.17%
datatables datatables-plugin datatables-column-resize javascript jquery

datatables.colresize's Introduction

jQuery dataTables ColResize

Plugin to resize columns by mouse drag or touch.

Demo:

https://dhobi.github.io/datatables.colResize/

Installation:

As npm package:

npm i datatables.net-colresize-unofficial

Manually:

Javascript file to include: jquery.dataTables.colResize.js

Stylesheet to include: jquery.dataTables.colResize.css

With CDN links:

https://cdn.jsdelivr.net/npm/datatables.net-colresize-unofficial@latest/jquery.dataTables.colResize.css
https://cdn.jsdelivr.net/npm/datatables.net-colresize-unofficial@latest/jquery.dataTables.colResize.js

Usage:

The plugin will try to initialize itself on preInit.dt event.

var options = { ...see below... };
// Either:
var table = $('#example').DataTable({
    colResize: options
});

// Or:
var table = $('#example').DataTable();
new $.fn.dataTable.ColResize(table, options);

// Available methods:
table.colResize.enable();  // enable plugin (i.e. when options was isEnabled: false)
table.colResize.disable(); // remove all events
table.colResize.reset();   // reset column.sWidth values
table.colResize.save();    // save the current state (defaults to localstorage)
table.colResize.restore(); // restore the state from storage (defaults to localstorage)

Options:

colResize = {
    isEnabled: true,
    saveState: false,
    hoverClass: 'dt-colresizable-hover',
    hasBoundCheck: true,
    minBoundClass: 'dt-colresizable-bound-min',
    maxBoundClass: 'dt-colresizable-bound-max',
    isResizable: function (column) {
        return true;
    },
    onResizeStart: function (column, columns) {
    },
    onResize: function (column) {
    },
    onResizeEnd: function (column, columns) {
    },
    getMinWidthOf: function ($thNode) {
    },
    stateSaveCallback: function (settings, data) {
    },
    stateLoadCallback: function (settings) {
    }
}

isEnabled

default: true

Specify whether resize functionality is enabled on dataTable init

saveState

default false

Specify whether state should automatically save when changed and restore on page load

hoverClass

default: 'dt-colresizable-hover'

Class which will be toggled on resizable & hovered <th> element (right border +/- 10px)

hasBoundCheck

default: true

Specify whether min-width / max-width styles are checked to keep resizing of column in bounds

minBoundClass

default: 'dt-colresizable-bound-min'

Class which will be toggled for 500ms once the min-width of the column has been reached

maxBoundClass

default: 'dt-colresizable-bound-max'

Class which will be toggled for 500ms once the max-width of the column has been reached

isResizable

default: column.isResizable / true

Called once during plugin/datatable init. Return false will not attach the drag events to the column.

onResizeStart

Callback on drag start / touchstart event. Parameter is the dataTable column which has been resized and all other columns in the table.

onResize

Callback on dragging / touchmove event. Parameter is the dataTable column which is currently being resized.

onResizeEnd

Callback on drag end / touchend event. Parameter is the dataTable column which has been resized and all other columns in the table.

getMinWidthOf

default: null

If defined (not null) will be used to calculate the minimal width of the given jQuery th - node.

If null (default) the plugin tries to detect the minimal width by

  1. Looking at the CSS min-width property
  2. Guessing the width by checking the space the text label uses
  3. Minimum 30px width

stateSaveCallback

default: uses localStorage

Callback when state needs to save. Parameter is an array of column sizes.

example: [437,412,416,258,397,357]

stateLoadCallback

default: uses localStorage

Callback when state needs to be restored. You will need to return an array of column sizes.

example: [437,412,416,258,397,357]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.