By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
Sortable | Reorderable drag-and-drop lists | Widget library
 by  SortableJS JavaScript Version: 1.15.0 License: MIT
 by  SortableJS JavaScript Version: 1.15.0 License: MIT
kandi X-RAY | Sortable Summary
Support
- Sortable has a medium active ecosystem.
- It has 26246 star(s) with 3572 fork(s). There are 412 watchers for this library.
- There were 1 major release(s) in the last 12 months.
- There are 399 open issues and 1278 have been closed. On average issues are closed in 213 days. There are 25 open pull requests and 0 closed requests.
- It has a neutral sentiment in the developer community.
- The latest version of Sortable is 1.15.0
Quality
- Sortable has 0 bugs and 0 code smells.
Security
- Sortable has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
- Sortable code analysis shows 0 unresolved vulnerabilities.
- There are 0 security hotspots that need review.
License
- Sortable is licensed under the MIT License. This license is Permissive.
- Permissive licenses have the least restrictions, and you can use them in most projects.
Reuse
- Sortable releases are available to install and integrate.
- Deployable package is available in npm.
- Installation instructions, examples and code snippets are available.
kandi has reviewed Sortable and discovered the below as its top functions. This is intended to give you an instant insight into Sortable implemented functionality, and help decide if they suit your requirements.
- Initialize the plugin .
- Represents an animation state machine .
- Auto - scroll plugin
- The sortable class
- Switcher plugin .
- Gets an element bounding box .
- Dispatch an event
- Handles the drag event on the sortable .
- Calculates the swipe direction and direction .
- This function is called when the x axis is displayed
Get all kandi verified functions for this library.
Get all kandi verified functions for this library.
Sortable Key Features
Supports touch devices and modern browsers (including IE9)
Can drag from one list to another or within the same list
CSS animation when moving items
Supports drag handles and selectable text (better than voidberg's html5sortable)
Smart auto-scrolling
Advanced swap detection
Smooth animations
Multi-drag support
Support for CSS transforms
Built using native HTML5 drag and drop API
Supports Meteor Angular 2.0+ 1.* React ES2015+ Mixin Knockout Polymer Vue Ember
Supports any CSS library, e.g. Bootstrap
Simple API
Support for plugins
CDN
No jQuery required (but there is support)
Typescript definitions at @types/sortablejs
Sortable Examples and Code Snippets
Community Discussions
- Align checkbox to center
- Veutify data table with number of rows that doesn't make the full height of the table
- ngtsc(2345) - Argument of type 'Event' is not assignable to parameter of type 'SortEvent'
- React Table set Header onClick-Function without disable sort-Function
- Why is the space key being filtered out by MUI's Text Field component?
- NG_PERSISTENT_BUILD_CACHE=1 ng serve not working
- Convert JSON data to pandas df - python
- Prevent sorting from styling column on antd
- React switch focus on route change
- Vaadin Grid sortable date column
Trending Discussions on Sortable
QUESTION
Align checkbox to center
Asked 2022-Apr-01 at 07:29I am using v-data-table. I am trying to align the checkbox to center because it is automatically aligned left when using the data table even if I used align: center on it. Here is the object on my data table header:
{ text: this.$t('Actions'), value: 'actions', width:'10%', align:'center', sortable: false , divider: true},
On my v-data-table tag, I used on <template> tag as follows:
<template v-slot:item.visibility="{ item }">
<v-checkbox
v-model="item.isVisible">
</v-checkbox>
</template>
I tried using the <center> tag, align-items: center on CSS when I assigned a class on it, using the class="text-center" and class="justify-center". But none of them worked. Is there any way to manipulate the alignment of data in v-data-table?
ANSWER
Answered 2022-Apr-01 at 07:14Use class d-flex justify-center.
justify-center works only when the display is flex. so set it using d-flex
QUESTION
Veutify data table with number of rows that doesn't make the full height of the table
Asked 2022-Feb-25 at 20:54I am trying to use a v-data-table with fixed header and a footer. But I have a problem, if I define a height for the table that's bigger than the height of the rows, the table takes the height that I defined, and the footer stays far away from the rows.
Here is a codepen
Is there a smart way to solve this?
The HTML
<div id="app">
<v-app id="inspire">
<div>
<v-data-table
height="300"
v-model="selected"
:headers="headers"
fixed-header
:items="desserts"
item-key="name"
>
</v-data-table>
</div>
</v-app>
</div>
JS
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
singleSelect: false,
selected: [],
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
],
}
},
})
ANSWER
Answered 2022-Feb-25 at 20:54Since the height will just be perceived as CSS, you can try:
<div id="app">
<v-app id="inspire">
<div>
<v-data-table
height="auto"
v-model="selected"
:headers="headers"
fixed-header
:items="desserts"
item-key="name"
>
</v-data-table>
</div>
</v-app>
</div>
QUESTION
ngtsc(2345) - Argument of type 'Event' is not assignable to parameter of type 'SortEvent'
Asked 2022-Feb-25 at 14:22I'm new to angular. I've been trying to sort columns but I keep on getting this error:
Argument of type 'Event' is not assignable to parameter of type 'SortEvent'. Type 'Event' is missing the following properties from type 'SortEvent': column, direction - ngtsc(2345).
Any suggestions on how to make this work?
s-product-management.component.html:
<form>
<div class="form-group form-inline">
Full text search: <input class="form-control ml-2" type="text" name="searchTerm" [(ngModel)]="service.searchTerm"/>
<span class="ml-3" *ngIf="service.loading$ | async">Loading...</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
<th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
<th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products$ | async">
<th scope="row">{{ product.id }}</th>
<td>
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + product.flag" class="mr-2" style="width: 20px">
<ngb-highlight [result]="product.name" [term]="service.searchTerm"></ngb-highlight>
</td>
<td><ngb-highlight [result]="product.area | number" [term]="service.searchTerm"></ngb-highlight>
</td>
<td><ngb-highlight [result]="product.population | number" [term]="service.searchTerm"></ngb-highlight></td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
</ngb-pagination>
<select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
<option [ngValue]="2">2 items per page</option>
<option [ngValue]="4">4 items per page</option>
<option [ngValue]="6">6 items per page</option>
</select>
</div>
</form>
s-product-management.component.ts:
@Component(
{selector: 'app-s-product-management', templateUrl: './s-product-management.component.html', providers: [ProductService, DecimalPipe]})
export class SProductManagementComponent {
products$: Observable<Product[]>;
total$: Observable<number>;
@ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;
constructor(public service: ProductService) {
this.products$ = service.products$;
this.total$ = service.total$;
this.headers = new QueryList();
}
onSort({column, direction}: SortEvent) {
// resetting other headers
this.headers.forEach(header => {
if (header.sortable !== column) {
header.direction = '';
}
});
this.service.sortColumn = column;
this.service.sortDirection = direction;
}
}
sortable.directive.ts:
export type SortColumn = keyof Product | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };
export interface SortEvent {
column: SortColumn;
direction: SortDirection;
}
@Directive({
selector: 'th[sortable]',
host: {
'[class.asc]': 'direction === "asc"',
'[class.desc]': 'direction === "desc"',
'(click)': 'rotate()'
}
})
export class NgbdSortableHeader {
@Input() sortable: SortColumn = '';
@Input() direction: SortDirection = '';
@Output() sort = new EventEmitter<SortEvent>();
rotate() {
this.direction = rotate[this.direction];
this.sort.emit({column: this.sortable, direction: this.direction});
}
}
ANSWER
Answered 2021-Aug-21 at 14:06$event is not the same type as SortEvent, as you need. $event will always contain a lot of key-value pairs, unless you are using with anything other than legacy elements.
QUESTION
React Table set Header onClick-Function without disable sort-Function
Asked 2022-Feb-24 at 05:32How can I set an onClick-Function to my table-header without removing the sort function (useSortBy) which will be executed by clicking the Header. Here is my code:
function renderTableHeader() {
const headers = headerGroups.map(headerGroup => {
return (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps(
column.sortable && column.getSortByToggleProps()
)}
>
{(column.render("Header")}
<span>
<i className={determineSortState(column)} />
</span>
</th>
))}
</tr>
);
});
ANSWER
Answered 2021-Oct-04 at 12:33react-table sets up an onClick handler on the <th>element by this expression: {...column.getHeaderProps(column.getSortByToggleProps())}
If you put your own onClick handler before it, it will be overridden. If you put it behind it, it will override the handler from react-table, which will break the sorting.
So you need to trigger the react-table handler manually in your override like this:
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
onClick={(e) => {
//trigger the react-table header onClick manually
column
.getHeaderProps(column.getSortByToggleProps())
.onClick(e);
//your onclick functionallity goes in here
console.log("my on click");
}}
>
QUESTION
Why is the space key being filtered out by MUI's Text Field component?
Asked 2022-Feb-09 at 21:39When I place one of MUI's Text Field components inside the column header of a Data Grid component, I'm unable to type a space into the text field. Similarly, if I press the right or left arrow key while the text field has focus, the text field loses focus rather than changing the position of the cursor within the text field.
Sandbox: https://codesandbox.io/s/cant-add-space-to-muis-textfield-erpvc?file=/src/App.js
import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import TextField from "@mui/material/TextField";
import "./styles.css";
export default function App() {
const rows = [
{ id: 1, "Column 1": 1, "Column 2": 2 },
{ id: 2, "Column 1": 3, "Column 2": 4 },
{ id: 3, "Column 1": 4, "Column 2": 5 }
];
const createColumn = (name) => {
return {
field: name,
align: "center",
editable: true,
sortable: false
};
};
const columns = [
createColumn("Column 1"),
createColumn("Column 2"),
{
field: "Add a split",
width: 225,
sortable: false,
renderHeader: (params) => {
return (
<TextField
placeholder="Enter column name"
size="small"
onKeyDown={(event) => console.log("Key down: ", event.key)}
onKeyUp={(event) => console.log("Key up: ", event.key)}
onKeyPress={(event) => console.log("Key press: ", event.key)}
/>
);
}
}
];
return (
<div className="App">
<DataGrid
className="App-data-grid"
rows={rows}
columns={columns}
disableSelectionOnClick
disableColumnMenu
/>
</div>
);
}
ANSWER
Answered 2022-Feb-09 at 21:39In the accessibility portion of the documentation, you can find keyboard navigation details for the data grid. Arrow keys are used to navigate between cells and space (among other things) is used to navigate to the next scrollable page. You can find the handling of those keys in the handleCellNavigationKeyDown function in useGridKeyboardNavigation.ts.
When a key down event happens for one of those special navigation characters, MUI calls event.preventDefault() which in your case prevents the key from having its default effect within the input. You can prevent that by using event.stopPropagation() within the TextField onKeyDown such that the event never reaches the grid's keyboard navigation handling code. Keep in mind though that by doing this, you may be harming some of the keyboard accessibility features.
Here's a modified version of your sandbox demonstrating this: https://codesandbox.io/s/cant-add-space-to-muis-textfield-33joy?file=/src/App.js:863-902.
QUESTION
NG_PERSISTENT_BUILD_CACHE=1 ng serve not working
Asked 2022-Jan-20 at 18:32I am trying to use the persistent build cache feature provided by angular but look like its not working for me, I am trying the below command
NG_PERSISTENT_BUILD_CACHE=1 ng serve
It always returns below error
'NG_PERSISTENT_BUILD_CACHE' is not recognized as an internal or external command,operable program or batch file.
I am using angular cli version 12.2.15. I am not sure what I am missing. Below is my packages.json file
"dependencies": {
"@agm/core": "^1.1.0",
"@angular-devkit/core": "^12.2.15",
"@angular/animations": "^12.2.15",
"@angular/common": "^12.2.15",
"@angular/compiler": "^12.2.15",
"@angular/core": "^12.2.15",
"@angular/forms": "^12.2.15",
"@angular/platform-browser": "^12.2.15",
"@angular/platform-browser-dynamic": "^12.2.15",
"@angular/platform-server": "^12.2.15",
"@angular/pwa": "^0.1100.2",
"@angular/router": "^12.2.15",
"@angular/service-worker": "^12.2.15",
"@auth0/angular-jwt": "5.0.2",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@nguniversal/module-map-ngfactory-loader": "^8.1.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/ckeditor": "^4.9.10",
"@types/hammerjs": "^2.0.36",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.10",
"@types/papaparse": "^5.3.1",
"@webcomponents/shadydom": "^1.9.0",
"acorn": "^8.0.4",
"angular-chart.js": "^1.1.1",
"angular-file-uploader": "7.0.3",
"angular-mydatepicker": "^0.10.2",
"angular-ng-autocomplete": "^2.0.1",
"angular-split": "4.0.0",
"angular2-datetimepicker": "^1.1.1",
"angular2-text-mask": "9.0.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.5.3",
"ckeditor": "4.12.1",
"core-js": "^3.8.0",
"events": "^3.2.0",
"export-to-csv": "^0.2.1",
"first": "0.0.3",
"fullcalendar": "^4.0.0-alpha.4",
"fullcalendar-scheduler": "^4.0.0-alpha.4",
"hammerjs": "^2.0.8",
"highcharts": "^8.2.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jspdf": "^2.1.1",
"jw-angular-social-buttons": "^1.0.0",
"mdn-polyfills": "^5.20.0",
"moment-mini-ts": "^2.20.1",
"ng-multiselect-dropdown": "^0.2.10",
"ng2-ckeditor": "^1.2.9",
"ng2-date-picker": "11.0.0",
"ng2-pdf-viewer": "6.2.0",
"ng2-slim-loading-bar": "^4.0.0",
"ng4-loading-spinner": "^1.2.3",
"ng5-slider": "^1.2.6",
"ng9-password-strength-bar": "^1.0.0",
"ngx-bootstrap": "6.2.0",
"ngx-color-picker": "^10.1.0",
"ngx-countdown": "11.0.0",
"ngx-device-detector": "^1.5.2",
"ngx-drag-drop": "^2.0.0",
"ngx-fullcalendar": "^5.0.0-alpha.1",
"ngx-hm-sortable": "^1.0.0",
"ngx-img-cropper": "^10.0.0",
"ngx-infinite-scroll": "^10.0.0",
"ngx-mask": "11.1.4",
"ngx-mega-simple-drag-drop-list": "^1.0.8",
"ngx-order-pipe": "^2.1.1",
"ngx-papaparse": "^5.0.0",
"ngx-print": "^1.2.0-beta.5",
"ngx-select-dropdown": "^1.4.4",
"ngx-sortable": "^1.0.3",
"ngx-sortablejs": "^10.0.0",
"ngx-toastr": "^13.1.0",
"papaparse": "^5.3.0",
"pdfjs-dist": "2.3.200",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"signature_pad": "^3.0.0-beta.4",
"sortablejs": "^1.12.0",
"ts-deferred": "^1.0.4",
"tslib": "^2.2.0",
"webpack-bundle-analyzer": "^4.1.0",
"xlsx": "^0.17.4",
"zone.js": "~0.11.4",
"zxcvbn": "^4.4.2"
},
here is a snapshot when I am checking my package version using ng v command
ANSWER
Answered 2022-Jan-20 at 18:32You seem to be using Windows cmd to run the command, and hence you are getting the error.
The command:
NG_PERSISTENT_BUILD_CACHE=1 ng serve
is for Unix-like systems and won't work within Windows cmd.
You can use any of the below methods to make it work:
- First set environment variable and then run the command
// 1st command to set the environment variable
set NG_PERSISTENT_BUILD_CACHE=1
// 2nd command
ng serve
- Run both commands within single step
set NG_PERSISTENT_BUILD_CACHE=1&&ng serve
- Add the below command within package.json scripts and then run
npm start
"scripts": {
"start": "set NG_PERSISTENT_BUILD_CACHE=1&&ng serve",
...
}
PS: In all the above methods the environment variable value is set for the cmd session in which we run the command. If you want to set the environment variable globally, then that can be achieved by adding System variables within Environment Variables dialog. (System Properties -> Environment Variables -> System variables).
QUESTION
Convert JSON data to pandas df - python
Asked 2022-Jan-20 at 03:23I know there is a few questions on SO regarding the conversion of JSON file to a pandas df but nothing is working. Specifically, the JSON requests the current days information. I'm trying to return the tabular structure that corresponds with Data but I'm only getting the first dict object.
I'll list the current attempts and the resulting outputs below.
import requests
import pandas as pd
import json
get_session_url = "https://qships.tmr.qld.gov.au/webx/"
get_data_url = "https://qships.tmr.qld.gov.au/webx/services/wxdata.svc/GetDataX"
get_data_query = {
"token": None,
"reportCode": "MSQ-WEB-0001",
"dataSource": None,
"filterName": "Today",
"parameters": [{
"__type": "ParameterValueDTO:#WebX.Core.DTO",
"sName": "DOMAIN_ID",
"iValueType": 0,
"aoValues": [{"Value": -1}],
}],
"metaVersion": 0,
}
sess = requests.session()
sess.get(get_session_url).raise_for_status()
my_dict = sess.post(get_data_url, json = get_data_query).json()
print(my_dict)
Output:
{'d': {'__type': 'DataSetDTO:#WebX.Core.DTO', 'BuildVersion': '7.0.0.12590', 'ReportCode': 'MSQ-WEB-0001', 'Tables': [{'__type': 'DataTableDTO:#WebX.Core.DTO', 'BuildVersion': '7.0.0.12590', 'AsOfDate': '14:36 on Jan 19', 'Data': [[132378, 334489, 'EXT', 'NANA Z', 'BULK CARRIER', 229.2, 'LBH Australia Pty Ltd (Mackay)', '/Date(1642600800000+1000)/', '/Date(1642600800000+1000)/', 'SEA for HPS', 'Anch for HPS & DBCT', 'PLAN', 'Keelung (Chilung)', 'Kwangyang', None, 633086, 705], [132112, 333984, 'DEP', 'KRITI WARRIOR', 'BULK CARRIER', 234.98, 'Wilhelmsen Ships Service (Gladstone)', '/Date(1642600800000+1000)/', '/Date(1642608900000+1000)/', 'Fishermans Landing 1', 'SEA', 'CONF', 'Amrun', 'Amrun', '2201', 632395, 725], [132232, 334208, 'EXT', 'BLUE GRASS MARINER', 'TANKER', 183.06, 'Gulf Agency Company (Mackay)', '/Date(1642600860000+1000)/', '/Date(1642600860000+1000)/', 'SEA M', 'Anch for MKY', 'PLAN', 'Gladstone', 'Singapore', None, 633566, 705], [132654, 335076, 'EXT', 'SERIFOS WARRIOR', 'BULK CARRIER', 234.98, 'Wilhelmsen Ships Service (Gladstone)', '/Date(1642606200000+1000)/', '/Date(1642609800000+1000)/', 'SEA', 'Fairway Buoy Anchorage', 'PLAN', 'Amrun', 'Amrun', '2201', 632055, 705], [132030, 333847, 'ARR', 'MH GREEN', 'CONTAINER SHIP', 199.98, 'Inchcape Shipping Services (Queensland)', '/Date(1642610700000+1000)/', '/Date(1642623300000+1000)/', 'SEA', 'Fisherman Island No 8', 'SCHD', 'Yantian', 'Botany Bay', '11S/11N', 633005, 710], [131681, 333193, 'ARR', 'KM NAGOYA', 'BULK CARRIER', 234.98, 'Gulf Agency Company (Gladstone)', '/Date(1642611600000+1000)/', '/Date(1642618800000+1000)/', 'Fairway Buoy Anchorage', 'Clinton Coal 2', 'CONF', 'Fangcheng', 'Singapore', None, 633504, 725], [132781, 335341, 'ARR', 'MORNING CLARA', 'VEHICLES CARRIER', 199.9, 'Wilhelmsen Ships Service (Brisbane)', '/Date(1642611600000+1000)/', '/Date(1642626000000+1000)/', 'Drift Point Cartwright', 'Fisherman Island No 1', 'SCHD', 'Tianjin', 'Port Kembla', '2251', 633093, 710], [131971, 333736, 'DEP', 'MAPLE FORTITUDE', 'BULK CARRIER', 179.9, 'Inchcape Shipping Services (Queensland)', '/Date(1642615200000+1000)/', '/Date(1642621500000+1000)/', 'Townsville 09', 'SEA', 'SCHD', 'Lanshan', 'Auckland', '2101', 633738, 710], [131629, 333076, 'DEP', 'JP CORAL', 'BULK CARRIER', 228.0, 'Sturrock Grindrod Maritime (Gladstone)', '/Date(1642617000000+1000)/', '/Date(1642625100000+1000)/', 'Clinton Coal 2', 'SEA', 'CONF', 'Matsushima - Nagasaki', 'Matsuura - Nagasaki', '146', 631305, 725], [130504, 331071, 'ARR', 'KENNADI', 'BULK CARRIER', 199.9, 'LBH Australia Pty Ltd (Gladstone)', '/Date(1642617000000+1000)/', '/Date(1642626000000+1000)/', 'East Anchorage 9', 'Clinton Coal 4', 'CONF', 'Kwangyang', 'Kendari - Sulawesi', '37', 633759, 725], [131497, 332926, 'ARR', 'STAR VIRGINIA', 'BULK CARRIER', 229.0, 'Inchcape Shipping Services (Queensland)', '/Date(1642617900000+1000)/', '/Date(1642633200000+1000)/', 'Point Cartwright Anchorage', 'Fisherman Island Coal Berth', 'SCHD', 'Kitakyushu', 'Fukuyama - Hiroshima', '2', 632115, 710], [132459, 334657, 'ARR', 'NORD ANNAPOLIS', 'BULK CARRIER', 179.9, 'Monson Agencies Australia (Gladstone)', '/Date(1642617900000+1000)/', '/Date(1642625100000+1000)/', 'East Anchorage 11', 'Auckland Point 2', 'CONF', 'Portland', 'Chittagong', '26', 633752, 725], [132563, 334863, 'DEP', 'POSITIVE LEADER', 'VEHICLES CARRIER', 180.0, 'Monson Agencies Australia (Brisbane)', '/Date(1642622400000+1000)/', '/Date(1642635000000+1000)/', 'Fisherman Island No 1', 'SEA', 'SCHD', 'Townsville', 'Port Kembla', '090', 632525, 710], [132221, 334613, 'ARR', 'DANCEWOOD SW', 'BULK CARRIER', 170.7, 'Inchcape Shipping Services (Queensland)', '/Date(1642622400000+1000)/', '/Date(1642640400000+1000)/', 'Point Cartwright Anchorage', 'Pinkenba No 1', 'SCHD', 'Guam', 'Shibushi', '202201', 632332, 710], [132357, 334450, 'EXT', 'DOUBLE FANTASY', 'BULK CARRIER', 234.98, 'Monson Agencies Australia (Townsville & Abbot Point)', '/Date(1642622400000+1000)/', '/Date(1642622400000+1000)/', 'SEA', 'Abbot Point Anchorage', 'SCHD', 'Chiba', None, None, 631611, 710], [132431, 334598, 'DEP', 'INDUS PROSPERITY', 'BULK CARRIER', 229.2, 'Monson Agencies Australia (Townsville & Abbot Point)', '/Date(1642624200000+1000)/', '/Date(1642624200000+1000)/', 'Abott Point 2', 'SEA', 'SCHD', 'Chiba', 'Dung Quat', None, 627891, 710], [132465, 334672, 'DEP', 'KOTA LUMAYAN', 'CONTAINER SHIP', 260.502, 'Gulf Agency Company (Brisbane)', '/Date(1642626000000+1000)/', '/Date(1642639500000+1000)/', 'Fisherman Island No. 9', 'SEA', 'PLAN', 'Singapore', 'Sydney', '0147', 632026, 705], [132356, 334446, 'ARR', 'TRITON', 'BULK CARRIER', 225.0, 'Sturrock Grindrod Maritime (Mackay)', '/Date(1642626000000+1000)/', '/Date(1642632000000+1000)/', 'North Anchorage 22', 'HPS Berth 2', 'SCHD', 'Gunsan (ex Kunsan)', 'Singapore', '012022', 633638, 710], [132430, 334595, 'ARR', 'GOLDEN YOSA', 'TANKER', 144.03, 'Sturrock Grindrod Maritime (Brisbane)', '/Date(1642626000000+1000)/', '/Date(1642644000000+1000)/', 'SEA', 'Viva Energy', 'SCHD', 'Geelong', 'Townsville', '74(C1)', 628015, 710], [132631, 335048, 'DEP', 'MONDIAL SUN', 'BULK CARRIER', 229.0, 'Ben Line Agencies', '/Date(1642626000000+1000)/', '/Date(1642629600000+1000)/', 'Abbot Point 1', 'SEA', 'SCHD', 'Bahudopi', 'India', '018', 633700, 710], [132451, 334640, 'EXT', 'GOLDEN HACHI', 'TANKER', 126.8, 'Sturrock Grindrod Maritime (Brisbane)', '/Date(1642626000000+1000)/', '/Date(1642626000000+1000)/', 'SEA', 'Point Cartwright Anchorage', 'PLAN', 'Singapore', 'Botany Bay', '10', 632483, 705], [132442, 334622, 'DEP', 'FOREVER SW', 'BULK CARRIER', 189.99, 'Gulf Agency Company (Brisbane)', '/Date(1642626000000+1000)/', '/Date(1642643100000+1000)/', 'Fisherman Island Coal Berth', 'SEA', 'SCHD', 'Toledo/Cebu', 'Kushiro', '2A', 569051, 710], [132572, 334905, 'ARR', 'GREEK FRIENDSHIP', 'BULK CARRIER', 228.9, 'LBH Australia Pty Ltd (Mackay)', '/Date(1642627800000+1000)/', '/Date(1642627800000+1000)/', 'Abbot Point Anchorage 11', 'Abott Point 2', 'SCHD', 'Tianjin', 'Singapore', None, 633660, 710], [132262, 334259, 'DEP', 'ASTREA', 'BULK CARRIER', 228.99, 'Wave Shipping Pty Ltd', '/Date(1642627800000+1000)/', '/Date(1642627860000+1000)/', 'HPS Berth 1', 'SEA Paddock Departure', 'PLAN', 'Lianyungang', 'Singapore', '1', 633595, 705], [132510, 334762, 'DEP', 'BRILLIANT ADVANCE', 'BULK CARRIER', 228.99, 'Wilhelmsen Ships Service (Weipa)', '/Date(1642629600000+1000)/', '/Date(1642633200000+1000)/', 'Chith Export Facility', 'SEA', 'CONF', 'Laizhou', 'Gladstone', None, 631808, 725], [132170, 334112, 'ARR', 'LOWLANDS CRIMSON', 'BULK CARRIER', 234.96, 'Wilhelmsen Ships Service (Weipa)', '/Date(1642629600000+1000)/', '/Date(1642636800000+1000)/', 'Anchorage ^D', 'Chith Export Facility', 'CONF', 'Gladstone', 'China', None, 630787, 725], [132433, 334601, 'DEP', 'PT NORFOLK', 'GENERAL CARGO BARGE', 70.15, 'Pacific Tug (Aust) PTY LTD', '/Date(1642631400000+1000)/', '/Date(1642635000000+1000)/', 'Marina', 'Bundaberg Anchorage', 'CONF', None, None, None, 624749, 725], [132428, 334591, 'REM', 'PT KYTHIRA', 'TUG', 26.0, 'Pacific Tug (Aust) PTY LTD', '/Date(1642631400000+1000)/', '/Date(1642635000000+1000)/', 'Marina', 'Bundaberg Anchorage', 'CONF', None, 'Brisbane', None, 570086, 725], [131637, 333097, 'ARR', 'BALZANI', 'TANKER', 228.418, 'Monson Agencies Australia (Gladstone)', '/Date(1642632300000+1000)/', '/Date(1642642200000+1000)/', 'North Anchorage 7', 'Fishermans Landing 2', 'CONF', 'Yeosu (ex Yosu)', 'Port Kembla', '32106', 632359, 725], [132699, 335167, 'EXT', 'FEDERAL IMABARI', 'BULK CARRIER', 199.98, 'Monson Agencies Australia (Brisbane)', '/Date(1642633200000+1000)/', '/Date(1642633200000+1000)/', 'Skardon River Anchorage', 'SEA', 'CONF', None, None, None, 624678, 725], [132451, 335328, 'ARR', 'GOLDEN HACHI', 'TANKER', 126.8, 'Sturrock Grindrod Maritime (Brisbane)', '/Date(1642635000000+1000)/', '/Date(1642651200000+1000)/', 'Point Cartwright Anchorage', 'Ampol Lytton Products', 'PLAN', 'Singapore', 'Botany Bay', '10', 632483, 705], [131897, 333604, 'DEP', 'PROTEUS', 'TANKER', 183.06, 'Gulf Agency Company (Mackay)', '/Date(1642635000000+1000)/', '/Date(1642635060000+1000)/', 'Mackay Berth 1', 'SEA MKY', 'SCHD', 'Gladstone', 'Townsville', None, 633592, 710], [132059, 333886, 'ARR', 'RTM WAKMATHA', 'BULK CARRIER', 236.0, 'Wilhelmsen Ships Service (Gladstone)', '/Date(1642635000000+1000)/', '/Date(1642644900000+1000)/', 'Fairway Buoy Anchorage', 'Fishermans Landing 1', 'CONF', 'Gove', 'Amrun', None, 633057, 725], [132024, 333833, 'ARR', 'MARIA PRINCESS', 'TANKER', 228.59, 'Gulf Agency Company (Brisbane)', '/Date(1642635000000+1000)/', '/Date(1642654800000+1000)/', 'Point Cartwright Anchorage', 'Fishermans Island Tanker Terminal', 'SCHD', 'Seria Brunei', None, None, 633606, 710], [132504, 334740, 'EXT', 'MAIRAKI', 'BULK CARRIER', 291.9, 'LBH Australia Pty Ltd (Gladstone)', '/Date(1642636800000+1000)/', '/Date(1642636800000+1000)/', 'SEA', 'Drift Gladstone', 'PLAN', 'Tianjin', None, '43', 633705, 705], [132029, 333846, 'DEP', 'MANTA NILGUN', 'GENERAL CARGO', 179.99, 'Monson Agencies Australia (Gladstone)', '/Date(1642637700000+1000)/', '/Date(1642644000000+1000)/', 'South Trees East', 'SEA', 'CONF', 'Port Moresby', 'Nakhodka', '202201', 632946, 725], [132001, 333781, 'ARR', 'NSU KEYSTONE', 'BULK CARRIER', 299.94, 'Inchcape Shipping Services (Queensland)', '/Date(1642638600000+1000)/', '/Date(1642644000000+1000)/', 'North Anchorage 19', 'DBCT Berth 1', 'SCHD', 'Yeosu (ex Yosu)', 'Kimitsu', '57', 633532, 710], [131382, 332650, 'EXT', 'AQUADIVA', 'BULK CARRIER', 292.0, 'Gulf Agency Company (Gladstone)', '/Date(1642639500000+1000)/', '/Date(1642643100000+1000)/', 'SEA', 'Fairway Buoy Anchorage', 'PLAN', 'Bayuquan', 'Abbot Point', None, 633453, 705], [132417, 334562, 'DEP', 'KMARIN KENAI', 'BULK CARRIER', 229.0, 'Monson Agencies Australia (Mackay)', '/Date(1642640400000+1000)/', '/Date(1642644000000+1000)/', 'DBCT Berth 1', 'SEA Paddock Departure', 'SCHD', 'Yeosu (ex Yosu)', 'Sepetiba', None, 633645, 710], [132708, 335184, 'ARR', 'MSC ELA', 'CONTAINER SHIP', 294.06, 'Mediterranean Shipping Company', '/Date(1642641300000+1000)/', '/Date(1642654800000+1000)/', 'SEA', 'Fisherman Island No. 9', 'SCHD', 'Sydney', 'Shanghai', 'SE151R', 633718, 710], [132611, 335017, 'DEP', 'SSB 1803', 'BARGE CARRIER', 52.7, 'Sea Swift Pty Ltd', '/Date(1642644000000+1000)/', '/Date(1642647600000+1000)/', 'Hammond Island', 'SEA', 'CONF', None, None, None, 586569, 725], [132429, 334592, 'EXT', 'LEONORA VICTORY', 'TANKER', 183.2, 'Monson Agencies Australia (Gladstone)', '/Date(1642644000000+1000)/', '/Date(1642644000000+1000)/', 'SEA', 'Fairway Buoy Anchorage', 'PLAN', 'Balboa', 'Unknown Port', '32', 633737, 705], [132601, 335000, 'DEP', 'NORMAN RIVER', 'TUG', 24.45, 'Sea Swift Pty Ltd', '/Date(1642644000000+1000)/', '/Date(1642647600000+1000)/', 'Hammond Island', 'SEA', 'CONF', 'Cape Flattery', 'Cairns', None, 633691, 725], [132079, 335477, 'EXT', 'DEE4 LARCH', 'TANKER', 183.06, 'Inchcape Shipping Services (Queensland)', '/Date(1642646040000+1000)/', '/Date(1642646040000+1000)/', 'East Anchorage 6', 'SEA', 'PLAN', 'Etajima', 'Unknown Port', '1', 632184, 705], [132470, 334682, 'ARR', 'CASTILLO DE SANTISTEBAN', 'LIQUEFIED GAS TANKER', 299.9, 'Gulf Agency Company (Gladstone)', '/Date(1642646700000+1000)/', '/Date(1642658400000+1000)/', 'LNG Anchorage 2', 'Queensland Curtis LNG', 'CONF', 'Taiwan', 'Ningbo', None, 632133, 725], [132434, 334603, 'REM', 'PT NORFOLK', 'GENERAL CARGO BARGE', 70.15, 'Pacific Tug (Aust) PTY LTD', '/Date(1642647600000+1000)/', '/Date(1642662000000+1000)/', 'Shark Spit Anchorage', 'Queensport', 'SCHD', None, None, None, 624749, 710], [132538, 334816, 'EXT', 'WINCANTON', 'LIQUEFIED GAS TANKER', 119.95, 'Inchcape Shipping Services (Queensland)', '/Date(1642647600000+1000)/', '/Date(1642647600000+1000)/', 'SEA', 'Fairway Buoy Anchorage', 'PLAN', 'Newcastle', 'Newcastle', '264', 632386, 705], [132432, 334600, 'REM', 'PT KYTHIRA', 'TUG', 26.0, 'Pacific Tug (Aust) PTY LTD', '/Date(1642647600000+1000)/', '/Date(1642662000000+1000)/', 'Shark Spit Anchorage', 'Queensport', 'SCHD', 'Bundaberg', None, None, 570086, 710], [131727, 333300, 'ARR', 'SEMIRAMIS', 'BULK CARRIER', 228.9, 'Sturrock Grindrod Maritime (Mackay)', '/Date(1642647660000+1000)/', '/Date(1642653060000+1000)/', 'South Anchorage 09', 'HPS Berth 1', 'PLAN', 'Jingtang (Tangshan)', 'Singapore', 'TP0264', 633516, 705], [132130, 335179, 'ARR', 'CHORUS', 'BULK CARRIER', 228.99, 'Monson Agencies Australia (Mackay)', '/Date(1642649400000+1000)/', None, 'North Anchorage 06', 'DBCT Berth 3', 'SCHD', 'Busan', 'Kakogawa', '80', 633558, 710], [132439, 334614, 'EXT', 'SM TIGER', 'BULK CARRIER', 292.0, 'LBH Australia Pty Ltd (Mackay)', '/Date(1642649400000+1000)/', '/Date(1642649400000+1000)/', 'SEA for HPS', 'Anch for HPS & DBCT', 'PLAN', 'Kwangyang', 'Pohang', '50', 633640, 705], [132795, 335381, 'ARR', 'ALBATROSS BAY', 'LANDING CRAFT', 64.0, 'Sea Swift Pty Ltd', '/Date(1642651200000+1000)/', '/Date(1642654800000+1000)/', 'SEA', 'Horn Island', 'CONF', 'Cairns', 'Seisia', 'AB 2203', 633274, 725], [132433, 335356, 'ARR', 'PT NORFOLK', 'GENERAL CARGO BARGE', 70.15, 'Pacific Tug (Aust) PTY LTD', '/Date(1642651200000+1000)/', '/Date(1642654800000+1000)/', 'Bundaberg Anchorage', 'Marina', 'CONF', None, None, None, 624749, 725], [132428, 335355, 'REM', 'PT KYTHIRA', 'TUG', 26.0, 'Pacific Tug (Aust) PTY LTD', '/Date(1642651200000+1000)/', '/Date(1642654800000+1000)/', 'Bundaberg Anchorage', 'Marina', 'CONF', None, 'Brisbane', None, 570086, 725], [132295, 334319, 'DEP', 'HOEGH KOBE', 'VEHICLES CARRIER', 199.1, 'Seaway Agencies Pty Ltd', '/Date(1642654800000+1000)/', '/Date(1642669200000+1000)/', 'Wagners', 'SEA', 'SCHD', 'Auckland', 'Port Kembla', '68', 631289, 710], [132291, 334306, 'ARR', 'LOCH MAREE', 'BULK CARRIER', 176.83, 'Wave Shipping Pty Ltd', '/Date(1642655700000+1000)/', '/Date(1642672800000+1000)/', 'Point Cartwright Anchorage', 'Fisherman Island General Purpose Berth', 'SCHD', 'Fujairah', 'Lae', '9', 633744, 710], [132232, 334209, 'ARR', 'BLUE GRASS MARINER', 'TANKER', 183.06, 'Gulf Agency Company (Mackay)', '/Date(1642657200000+1000)/', '/Date(1642657260000+1000)/', 'Anch for MKY', 'Mackay Berth 1', 'SCHD', 'Gladstone', 'Singapore', None, 633566, 710], [132538, 334817, 'ARR', 'WINCANTON', 'LIQUEFIED GAS TANKER', 119.95, 'Inchcape Shipping Services (Queensland)', '/Date(1642657500000+1000)/', '/Date(1642668300000+1000)/', 'Fairway Buoy Anchorage', 'Fishermans Landing 5', 'CONF', 'Newcastle', 'Newcastle', '264', 632386, 725], [132473, 334686, 'EXT', 'GREAT CHEER', 'BULK CARRIER', 229.2, 'LBH Australia Pty Ltd (Mackay)', '/Date(1642658400000+1000)/', '/Date(1642658400000+1000)/', 'SEA for HPS', 'Anch for HPS & DBCT', 'PLAN', 'Kakogawa', 'Indonesia', '2201VC', 633677, 705], [132513, 334770, 'DEP', 'KAI YANG STAR', 'BULK CARRIER', 234.98, 'Wilhelmsen Ships Service (Weipa)', '/Date(1642659300000+1000)/', '/Date(1642666500000+1000)/', 'Lorim West', 'SEA', 'CONF', 'Dongjiakou', 'Qingdao', None, 633694, 725], [132575, 335351, 'EXT', 'IPSEA COLOSSUS', 'BULK CARRIER', 197.0, 'Monson Agencies Australia (Townsville & Abbot Point)', '/Date(1642662000000+1000)/', '/Date(1642662000000+1000)/', 'SEA', 'Abbot Point Anchorage', 'SCHD', 'Chittagong', None, None, 625240, 710], [132285, 334295, 'DEP', 'FW EXCURSIONIST', 'BULK CARRIER', 179.9, 'Wave Shipping Pty Ltd', '/Date(1642662000000+1000)/', '/Date(1642679100000+1000)/', 'Fisherman Island General Purpose Berth', 'SEA', 'SCHD', 'Busan', 'New Plymouth', '24', 633667, 710], [132364, 334463, 'EXT', 'JUPITER', 'BULK CARRIER', 225.0, 'LBH Australia Pty Ltd (Mackay)', '/Date(1642663800000+1000)/', '/Date(1642663800000+1000)/', 'SEA for DBCT', 'Anch for HPS & DBCT', 'PLAN', 'Rizhao', 'Singapore', '17', 633643, 705], [132781, 335342, 'DEP', 'MORNING CLARA', 'VEHICLES CARRIER', 199.9, 'Wilhelmsen Ships Service (Brisbane)', '/Date(1642665600000+1000)/', '/Date(1642680000000+1000)/', 'Fisherman Island No 1', 'SEA', 'SCHD', 'Tianjin', 'Port Kembla', '2251', 633093, 710], [131704, 333251, 'DEP', 'TANGGUH JAYA', 'LIQUEFIED GAS TANKER', 285.1, 'Wilhelmsen Ships Service (Gladstone)', '/Date(1642666500000+1000)/', '/Date(1642676400000+1000)/', 'Santos GLNG', 'SEA', 'CONF', 'Mexico', 'Incheon', None, 633458, 725], [130826, 331647, 'ARR', 'DL DAHLIA', 'BULK CARRIER', 229.0, 'Monson Agencies Australia (Gladstone)', '/Date(1642668300000+1000)/', '/Date(1642677300000+1000)/', 'Fairway Buoy Anchorage', 'Clinton Coal 1', 'CONF', 'Yeongheung', 'Tanjung Bin', '2712', 633296, 725], [132582, 334934, 'DEP', 'CORAL GEOGRAPHER', 'PASSENGER', 94.5, 'Coral Expeditions', '/Date(1642669200000+1000)/', '/Date(1642672800000+1000)/', 'C123', 'SEA', 'CONF', 'Cairns', 'Cairns', None, 633369, 725], [130422, 330911, 'DEP', 'NSU QUEST', 'BULK CARRIER', 299.94, 'Inchcape Shipping Services (Queensland)', '/Date(1642673700000+1000)/', '/Date(1642682700000+1000)/', 'Clinton Coal 3', 'SEA', 'CONF', 'Hay Point', 'Japan', '45', 632982, 725], [132795, 335383, 'REM', 'ALBATROSS BAY', 'LANDING CRAFT', 64.0, 'Sea Swift Pty Ltd', '/Date(1642674600000+1000)/', '/Date(1642676400000+1000)/', 'Horn Island', 'Main Jetty', 'CONF', 'Cairns', 'Seisia', 'AB 2203', 633274, 725], [132759, 335288, 'EXT', 'CMB PAUILLAC', 'BULK CARRIER', 235.0, 'Wilhelmsen Ships Service (Gladstone)', '/Date(1642675500000+1000)/', '/Date(1642679100000+1000)/', 'SEA', 'Fairway Buoy Anchorage', 'PLAN', 'Gove', 'Weipa', None, 633160, 705], [132430, 334596, 'DEP', 'GOLDEN YOSA', 'TANKER', 144.03, 'Sturrock Grindrod Maritime (Brisbane)', '/Date(1642676400000+1000)/', '/Date(1642692600000+1000)/', 'Viva Energy', 'SEA', 'SCHD', 'Geelong', 'Townsville', '74(C1)', 628015, 710], [132456, 334647, 'EXT', 'MISSY ENTERPRISE', 'GENERAL CARGO', 181.16, 'Wave Shipping Pty Ltd', '/Date(1642676400000+1000)/', '/Date(1642676460000+1000)/', 'SEA', 'Bundaberg Anchorage', 'PLAN', 'Singapore', 'Japan', '2', 631532, 705], [132389, 335619, 'EXT', 'GLOVIS CHORUS', 'VEHICLES CARRIER', 199.99, 'Gulf Agency Company (Brisbane)', '/Date(1642680000000+1000)/', '/Date(1642680000000+1000)/', 'SEA', 'Point Cartwright Anchorage', 'PLAN', 'Port Kembla', 'Pyeongtaek ', '77A', 630944, 705], [132505, 334744, 'EXT', 'NSU CHALLENGER', 'BULK CARRIER', 299.95, 'Gulf Agency Company (Gladstone)', '/Date(1642680000000+1000)/', '/Date(1642683600000+1000)/', 'SEA', 'Fairway Buoy Anchorage', 'PLAN', 'Nagoya', 'Oita', None, 633706, 705], [132727, 335219, 'EXT', 'RTM DIAS', 'BULK CARRIER', 234.87, 'Wilhelmsen Ships Service (Weipa)', '/Date(1642680900000+1000)/', '/Date(1642680900000+1000)/', 'SEA', 'Weipa Anchorage', 'PLAN', 'Gladstone', 'China', None, 633623, 705], [132859, 335500, 'ARR', 'FOURCROY', 'LANDING CRAFT', 49.8, 'Sea Swift Pty Ltd', '/Date(1642685400000+1000)/', '/Date(1642686900000+1000)/', 'SEA', 'Horn Island Barge Ramp', 'CONF', 'Saibai Island', 'Weipa', None, 633180, 725]], 'IsCustomMetaData': False, 'MetaData': {'__type': 'DataTableMetaDTO:#WebX.Core.DTO', 'Columns': [{'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'HAlignment': 'haright', 'Name': 'VOYAGE_ID', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Voyage Id', 'Visible': False, 'Width': '50px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'HAlignment': 'haright', 'Name': 'ID', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Id', 'Visible': False, 'Width': '20px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'JOB_TYPE_CODE', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Job Type', 'Visible': True, 'Width': '71px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '"link": {"title":"Ship Info", "type":"dashboard", "target":"_popup", "code":"standard.vesselinfo", "params":[{"name":"VID","value":"[%VESSEL_ID%]"}]}', 'Name': 'VESSEL_NAME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Ship', 'Visible': True, 'Width': '94px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'MSQ_SHIP_TYPE', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Ship Type', 'Visible': True, 'Width': '115px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'HAlignment': 'haright', 'Name': 'LOA', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'LOA', 'Visible': True, 'Width': '95px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'AGENCY_NAME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Agency', 'Visible': True, 'Width': '287px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'START_TIME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Start Time', 'Visible': True, 'Width': '91px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'END_TIME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'End Time', 'Visible': True, 'Width': '91px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'FROM_LOCATION_NAME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'From Location', 'Visible': True, 'Width': '139px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'TO_LOCATION_NAME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'To Location', 'Visible': True, 'Width': '139px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'STATUS_TYPE_CODE', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Status', 'Visible': True, 'Width': '83px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'LASTPORT_NAME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Last Port', 'Visible': True, 'Width': '114px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'NEXTPORT_NAME', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Next Port', 'Visible': True, 'Width': '114px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'Name': 'VOYAGE_NUMBER', 'SortIndex': -1, 'SortOrder': '', 'Sortable': True, 'Template': '', 'Title': 'Voyage #', 'Visible': True, 'Width': '45px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'HAlignment': 'haright', 'Name': 'VESSEL_ID', 'SortIndex': -1, 'SortOrder': '', 'Template': '', 'Title': 'Vessel Id', 'Visible': False, 'Width': '64px'}, {'__type': 'ColumnMetaDTO:#WebX.Core.DTO', 'Format': '', 'HAlignment': 'haright', 'Name': 'STATUS_TYPE', 'SortIndex': -1, 'SortOrder': '', 'Template': '', 'Title': 'Status Type', 'Visible': False, 'Width': '64px'}], 'Script': 'var data = this.getData();\nvar $row = this.get$Row();\nvar $jobtype = this.get$Cell(\'JOB_TYPE\');\n\nvar $startTime = this.get$Cell(\'START_TIME\');\nvar $endTime = this.get$Cell(\'END_TIME\');\n\nif (data.JOB_TYPE == "Arrival")\n{\n $jobtype.css(\'color\', \'green\');\n}\nif (data.JOB_TYPE == "Departure")\n{\n $jobtype.css(\'color\', \'blue\');\n}\nif (data.JOB_TYPE == "Shift")\n{\n $jobtype.css(\'color\', \'#8B7500\');\n}\nif (data.JOB_TYPE == "External")\n{\n $jobtype.css(\'color\', \'grey\');\n}\n\nif (data.STATUS_TYPE >= 735 &&data.STATUS_TYPE < 750 )\n{\n $startTime.css(\'font-weight\', \'bold\');\n $endTime.css(\'font-weight\', \'bold\');\n $startTime.css(\'font-style\', \'italic\');\n $endTime.css(\'font-style\', \'italic\');\n}\n\n', 'TemplateRow': '', 'TemplateTable': '', 'Version': 0}, 'Name': 'DATA'}]}}
I've tried using pd.json_normalize with and without record_path. Specifying record_path draws an error where column name can't be found.
print(pd.json_normalize(my_dict))
Output:
d.__type d.BuildVersion d.ReportCode d.Tables
0 DataSetDTO:#WebX.Core.DTO 7.0.0.12590 MSQ-WEB-0001 [{'__type': 'DataTableDTO:#WebX.Core.DTO', 'Bu...
print(pd.json_normalize(my_dict, record_path=['Data']))
Error:
File "/Users/kevin_o'connell/opt/anaconda3/lib/python3.8/site-packages/pandas/io/json/_normalize.py", line 243, in _pull_field
result = result[spec]
KeyError: 'Data'
I've also tried the following but as the print out shows, I'm not returning the tabular information associated with Data.
print(pd.concat({k: pd.DataFrame(v).T for k, v in my_dict.items()}, axis=0))
0
d __type DataSetDTO:#WebX.Core.DTO
BuildVersion 7.0.0.12590
ReportCode MSQ-WEB-0001
Tables {'__type': 'DataTableDTO:#WebX.Core.DTO', 'Bui...
Returning the desired info as an object, not a pandas df:
df = pd.json_normalize(my_dict['d'], 'Tables')
df = pd.DataFrame(df['Data'].T)
Out:
Data
0 [[132393, 334520, EXT, CESI BEIHAI, LIQUEFIED ...
list meta as a parameter:
df = pd.json_normalize(my_dict['d'], record_path = 'Tables', meta = ['Data'], errors = 'ignore')
raise ValueError(
ValueError: Conflicting metadata name Data, need distinguishing prefix
ANSWER
Answered 2022-Jan-20 at 03:23record_path is the path to the record, so you should specify the full path
df = pd.json_normalize(data, record_path=['d', 'Tables', 'Data'])
If you want to do without record_path, the value type of Data is list of list. You can use pd.DataFrame directly
df = pd.DataFrame(data['d']['Tables'][0]['Data'])
print(df)
0 1 2 3 4 5 ... 11 12 13 14 15 16
0 132378 334489 EXT NANA Z BULK CARRIER 229.20 ... PLAN Keelung (Chilung) Kwangyang None 633086 705
1 132112 333984 DEP KRITI WARRIOR BULK CARRIER 234.98 ... CONF Amrun Amrun 2201 632395 725
2 132232 334208 EXT BLUE GRASS MARINER TANKER 183.06 ... PLAN Gladstone Singapore None 633566 705
3 132654 335076 EXT SERIFOS WARRIOR BULK CARRIER 234.98 ... PLAN Amrun Amrun 2201 632055 705
4 132030 333847 ARR MH GREEN CONTAINER SHIP 199.98 ... SCHD Yantian Botany Bay 11S/11N 633005 710
.. ... ... ... ... ... ... ... ... ... ... ... ... ...
71 132456 334647 EXT MISSY ENTERPRISE GENERAL CARGO 181.16 ... PLAN Singapore Japan 2 631532 705
72 132389 335619 EXT GLOVIS CHORUS VEHICLES CARRIER 199.99 ... PLAN Port Kembla Pyeongtaek 77A 630944 705
73 132505 334744 EXT NSU CHALLENGER BULK CARRIER 299.95 ... PLAN Nagoya Oita None 633706 705
74 132727 335219 EXT RTM DIAS BULK CARRIER 234.87 ... PLAN Gladstone China None 633623 705
75 132859 335500 ARR FOURCROY LANDING CRAFT 49.80 ... CONF Saibai Island Weipa None 633180 725
[76 rows x 17 columns]
QUESTION
Prevent sorting from styling column on antd
Asked 2022-Jan-18 at 23:37I have an antd Table with a sortable column. This table's rows might or might not be styled. When I sort the rows the style is overwritten. Is there a way to prevent this?
Here's an example of an styled row.
And here's what happens when I sort the rows.
Here's what my Due Date column definition looks like:
{
title: 'Due Date',
dataIndex: 'due_date',
key: 'due_date',
sorter: (a:any, b:any) => new Date(a.due_date).getTime() - new Date(b.due_date).getTime(),
defaultSortOrder: 'ascend' as 'ascend'
}
ANSWER
Answered 2021-Aug-09 at 20:14The sorted column CSS rule has the following selector:
td.ant-table-column-sort {
...
}
So, to overwrite it you just have to write a CSS rule that's more specific than that.
tr.warning-table-row > td.ant-table-cell {
...
}
Bear in mind that in the example above warning-table-row is a custom class I created to tell whether the row should have a custom style applied to it. You'll have to write your own.
QUESTION
React switch focus on route change
Asked 2022-Jan-17 at 17:21I'm very new to React and Javascript, but hoping someone might be able to offer thoughts regarding how to reliably switch keyboard focus on a route change. In the following, selecting any of the menu items(green box is an example) on the LHS leads to a change in the main screen(orange box), but keyboard focus remains on the LHS after pressing Enter.
What I'm trying to achieve is that the keyboard focus switches to being the text highlighted(blue box), thus giving a better experience from a usability point of view. Having searched google, I believe to command to achieve this to be one of the following:
document.getElementById('content-container').focus();
document.getElementById('reviews-in-progress-title').focus();
with the stated Ids being those from the blue boxes in the debug tools. They represent the main screen and specific element, respectively however, neither achieves the desired effect.
What I am able to achieve is switching focus to the element highlighted in the red box using the following:
document.getElementById('sortable-column-manuscriptTitle').focus();
So, my question for the floor is: why is it that I'm able to switch focus to the red box, but not the blue one? It feels like this will be a pretty common (and solved/understood) problem, but I'm not currently able to crack it. Any input gratefully received.
Thanks, Phil
ANSWER
Answered 2022-Jan-17 at 17:21Some browsers won't allow the focus to be moved to an element if it's not an interactive element. In the blue box, you have an <h1>, which is not natively focusable. In the red box, you have a <buton>, which is focusable.
To get around it, add tabindex="-1" to the <h1>.
This will allow the focus to be moved to a non-interactive element via JS but won't allow the user to tab to it.
Now, having said that, in general you should not move the user's focus unless there's a really good reason for it. You mentioned you wanted to do it for a
"better experience from a usability point of view"
As a keyboard only user, I would find that a worse experience. If I'm a new user to the app and I wanted to explore the LHS menu to see what's available, I would tab to the menu, press enter or space to select the menu, then see what appears on the right. I'd then want to tab to the next menu item and select it to see what appears, but you moved my focus over to the right so now I have to shift+tab all the way back up to the menu. If I were using a sip-and-puff device or another assistive technology instead of a keyboard, that's going to be a lot of effort.
So your intention is good but it might cause a lot of difficulty for some users. That's why I recommend not moving the user's focus unless there's a really, really good reason for it.
Of course the opposite argument can be made. If the focus is not moved then the sip-and-puff user will have to navigate all the way over to the right side to interact with what appears.
You have to do some research to see what might benefit the most users without adversely affecting other users.
QUESTION
Vaadin Grid sortable date column
Asked 2022-Jan-12 at 16:50i want to add a sortable date column to my vaadin grid component. Unfortunately it doesn't work with formatted dates, I think after formatting the date object it is just a String and therefore sorting with this column doesn't work correctly, but I need anyway a solution for that. I already have tried this solution, which also doesn't work:
grid.addColumn(new LocalDateTimeRenderer<>(MyObject::getCreated,
DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT, FormatStyle.MEDIUM)
.withLocale(Locale.GERMANY).withZone(ZoneId.of("Europe/Paris"))))
.setHeader("Created").setSortProperty("created");
Do you have an another idea?
Thanks
ANSWER
Answered 2022-Jan-12 at 16:50You can set a comparator
grid.addColumn(new LocalDateTimeRenderer<>(MyObject::getCreated,
DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT, FormatStyle.MEDIUM)
.withLocale(Locale.GERMANY).withZone(ZoneId.of("Europe/Paris"))))
.setHeader("Created")
.setSortProperty("created")
.setComparator(MyObject::getCreated);
Please also check the documentation: https://vaadin.com/docs/latest/ds/components/grid#sorting
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Sortable
Support
Find more information at:
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more librariesReuse Solution Kits and Libraries Curated by Popular Use Cases
Explore KitsSave this library and start creating your kit
Clone
HTTPS
https://github.com/SortableJS/Sortable.git
CLI
gh repo clone SortableJS/Sortable
SSH
git@github.com:SortableJS/Sortable.git
Share this Page
See Similar Libraries in
Consider Popular Widget Libraries
- fullPage.js
by alvarotrigo
- react-beautiful-dnd
by atlassian
- Sortable
by SortableJS
- sortablejs
by SortableJS
- PhotoSwipe
by dimsemenov
See all Widget Libraries
Try Top Libraries by SortableJS
- sortablejs
by SortableJS JavaScript
- Vue.Draggable
by SortableJS JavaScript
- vue.draggable.next
by SortableJS JavaScript
- react-sortablejs
by SortableJS TypeScript
- ngx-sortablejs
by SortableJS TypeScript
See all Libraries by this author
Compare Widget Libraries with Highest Support
- fullPage.js
by alvarotrigo
- react-beautiful-dnd
by atlassian
- dropzone
by enyo
- Vue.Draggable
by SortableJS
- notebook
by jupyter
See all Widget Libraries
Compare Widget Libraries with Highest Quality
- Fancy-Album-for-Android
by ingyesid
- circular_progress_bar
by ylyc
- TextChronometer
by romainpiel
- oxbow
by eugener
- android-left-locked-gallery
by TheLevelUp
See all Widget Libraries
Compare Widget Libraries with Highest Security
- Fancy-Album-for-Android
by ingyesid
- adapterviewflipper-widget
by sunphiz
- circular_progress_bar
by ylyc
- TextChronometer
by romainpiel
- drag-sort-listview
by bauerca
See all Widget Libraries
Compare Widget Libraries with Permissive License
- oxbow
by eugener
- HorizontalImageScroller-Android
by twotoasters
- android-times-square
by square
- DynamicGrid
by askerov
- lucene-interval-fields
by Cue
See all Widget Libraries
Compare Widget Libraries with Highest Reuse
- drf-url-filters
by manjitkumar
- akivymd
by quitegreensky
- django-header-filter
by sanjioh
- blighty
by P403n1x87
- tkmacosx
by Saadmairaj
See all Widget Libraries
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more librariesReuse Solution Kits and Libraries Curated by Popular Use Cases
Explore KitsSave this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source