Multi-View jQuery Knowledge Grid with Kanban – DataBox

DataBox is an information show library for jQuery and Bootstrap that generates searchable tables, card grids, lists, tree views, and Kanban boards from any information.

Options

• 4 built-in views: information desk, card grid, record, and Kanban board.
• Swap between enabled views by means of UI buttons or JavaScript.
• International search, per-column filters, fast filters, and an AND/OR question builder.
• Pagination, steady scrolling modes, multi-column sorting, and AJAX server-side processing.
• Inline table-cell enhancing with textual content, quantity, date, choose, and checkbox inputs.
• Single or a number of row choice and configurable bulk actions.
• CSV and Excel-compatible .xls exports, clipboard copying, and browser printing or PDF saving.
• Expandable row particulars, grouping, footer calculations, mounted columns, and column reordering.
• Drag-and-drop Kanban playing cards with an software callback for modifications.
• Saved search, sorting, pagination, and think about state, plus English and Portuguese textual content dictionaries.

How To Use It

Set up

Load Bootstrap CSS, jQuery, the Bootstrap JavaScript bundle, and DataBox jQuery plugin within the doc. Font Superior 6 is elective for default icons.

<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.web/npm/[email protected]/dist/css/bootstrap.min.css">
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.web/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./dataBox.min.js"></script>

Fundamental Utilization

Give DataBox.init() a container ID, a report array, and the columns to show. 

<div id="staff-directory"></div>

<script>
const workers = [
  { id: 1, name: 'Avery Morgan', team: 'Engineering', role: 'Developer' },
  { id: 2, name: 'Jordan Lee', team: 'Design', role: 'Designer' },
  { id: 3, name: 'Taylor Reed', team: 'Operations', role: 'Coordinator' }
];

const listing = DataBox.init({
  goal: '#staff-directory',
  information: workers,
  language: 'en-US',
  views: {
    desk: {
      lively: true,
      title: 'Desk',
      columns: [
        { data: 'name', title: 'Name' },
        { data: 'team', title: 'Team' },
        { data: 'role', title: 'Role' }
      ]
    },
    card: { lively: true, title: 'Playing cards' }
  },
  search: { lively: true, fields: ['name', 'team', 'role'] },
  pagination: { restrict: 10 }
});

listing.setView('desk');
</script>

Swap Between Views and Allow Kanban

Kanban teams data by a subject comparable to standing. Place <div id="project-board"></div> on the web page. When a card strikes, onKanbanDrop receives the report and the earlier and new group values.

const board = DataBox.init({
  goal: '#project-board',
  information: [
    { id: 101, name: 'Landing page', status: 'Todo' },
    { id: 102, name: 'QA review', status: 'In progress' },
    { id: 103, name: 'Release notes', status: 'Done' }
  ],
  language: 'en-US',
  views: {
    card: { lively: true },
    desk: {
      lively: true,
      columns: [
        { data: 'name', title: 'Task' },
        { data: 'status', title: 'Status' }
      ]
    },
    kanban: {
      lively: true,
      groupBy: 'standing',
      allowDragDrop: true
    }
  },
  callbacks: {
    onKanbanDrop: operate(merchandise, oldGroup, newGroup) {
      console.log(merchandise.title, oldGroup, newGroup);
      // Save the modified standing to your backend if wanted.
    }
  }
});

board.setView('kanban');

The cardboard transfer updates the native report. Ship that change to your API from onKanbanDrop when the board makes use of saved backend information.

Load Knowledge From an API

Put <div id="orders"></div> within the web page and configure ajax.url. Server-side mode sends pagination, sorting, and search parameters to the endpoint. The server should apply them and return the matching data and counts.

const orders = DataBox.init({
  goal: '#orders',
  language: 'en-US',
  views: {
    card: { lively: false },
    desk: {
      lively: true,
      columns: [
        { data: 'id', title: 'Order ID' },
        { data: 'customer', title: 'Customer' },
        { data: 'total', title: 'Total' }
      ]
    }
  },
  ajax: {
    url: '/api/orders',
    methodology: 'GET',
    serverSide: true
  },
  pagination: { restrict: 20 }
});

Implement /api/orders in your software to just accept these parameters. Return an object with the DataBox response fields:

{
  "information": [{ "id": 101, "customer": "Avery", "total": 125 }],
  "recordsTotal": 240,
  "recordsFiltered": 240
}

Edit Cells and Deal with Adjustments

Place <div id="editable-orders"></div> in your web page. Set inlineEdit: true, mark the editable columns, and deal with onEdit. The callback receives the outdated and new values earlier than DataBox writes the edited subject to the report.

const editableTable = DataBox.init({
  goal: '#editable-orders',
  information: [
    { id: 1, item: 'Keyboard', status: 'Pending' },
    { id: 2, item: 'Monitor', status: 'Shipped' }
  ],
  language: 'en-US',
  views: {
    card: { lively: false },
    desk: {
      lively: true,
      inlineEdit: true,
      columns: [
        { data: 'item', title: 'Item' },
        {
          data: 'status',
          title: 'Status',
          editable: true,
          editType: 'select',
          editOptions: [
            { value: 'Pending', label: 'Pending' },
            { value: 'Shipped', label: 'Shipped' }
          ]
        }
      ]
    }
  },
  callbacks: {
    onEdit: operate(newValue, oldValue, merchandise, column) {
      console.log(merchandise.id, column.information, oldValue, newValue);
    }
  }
});

All Configuration Choices

Views and Column Definitions

Desk Column Properties

Search, Sorting, and Pagination

AJAX and Knowledge Processing

Choice, Export, and Superior Filters

API Strategies

Use DataBox.init(config) to create a grid. DataBox.getInstance(id) finds an present occasion by its container ID, and DataBox.destroy(id) removes it. 

const occasion = DataBox.getInstance('staff-directory');
occasion.search('Engineering').setView('desk');
occasion.clearSearch();

Occasion Strategies

Callbacks

Register lifecycle and interplay callbacks in callbacks.

For a client-side AJAX request, onDataLoaded can run throughout information processing and once more after the request succeeds. Keep away from non-idempotent writes on this callback.

FAQs

Does DataBox work in a challenge that doesn’t use jQuery?

No. The core requires jQuery 3.6+ and Bootstrap 5.3+. A vanilla JavaScript software would wish to load these dependencies or select a distinct information grid.

Why is my desk empty when the cardboard view works?

A desk wants views.desk.columns with information keys matching your data. Playing cards are lively by default, so disable views.card.lively while you need a table-only view.

Can DataBox course of filters and pagination on the server?

Sure. Set ajax.serverSide to true and implement an endpoint that accepts DataBox’s pagination, sorting, and search parameters. Return information, recordsTotal, and recordsFiltered within the JSON response.

Does the PDF export create a downloadable PDF file?

The PDF motion opens a printable doc and invokes the browser print dialog. Select a PDF vacation spot within the browser to save lots of a file. The Excel motion creates an XML-based .xls export, not .xlsx.

Can I take advantage of the Tree view with the 4 built-in views?

Sure. Load the /dist/plugins/dataBox.tree.js after dataBox.min.js and register DataBox.Tree.createRenderer() because the tree view renderer. This plugin isn’t included within the four-view core.

This superior jQuery plugin is developed by SyntaxSerenity-dev. For extra Superior Usages, please examine the demo web page or go to the official web site.