基本形

基本形

基本形反転

基本形（背景透過）

基本形反転（背景透過）

一段組み

POS+一段組みロゴ

一段組み

POS+一段組み反転ロゴ

一段組み反転

POS+一段組みロゴ（背景透過）

一段組み（背景透過）

欧文のみ

POS+基本形ロゴ（背景透過）欧文のみ

一段組み

POS+基本形ロゴ（背景透過）欧文のみ

一段組み反転

POS+基本形ロゴ（背景透過）欧文のみ

一段組み（背景透過）

ダウンロード

POS+food

POS+retail

POS+beauty

POS+lite

POS+connect

POS+Pay

POS+timerecorder

POS+QSC

FAVICON

POS+favicon

ICON

共通

f0d7 

                                
<i class="fas fa-caret-down"></i>

f0d8 

<i class="fas fa-caret-up"></i>

f2f5 

<i class="fas fa-sign-out-alt"></i>

f362 

<i class="fas fa-exchange-alt"></i>

f0dc 

<i class="fas fa-sort"></i>

f54e 

<i class="fas fa-store"></i>

f142 

<i class="fas fa-ellipsis-v"></i>

f002 

<i class="fas fa-search"></i>

f0b1 

<i class="fas fa-briefcase"></i>

f013 

<i class="fas fa-cog"></i>

f35d 

<i class="fas fa-external-link-alt"></i>

GRID

2 カラムレイアウト

col-6
col-6

3 カラムレイアウト

col-4
col-4
col-4
bootstrap4 - Grid system

COLOR

Primary Color

#0099d5

Secondary Color

#0099d5

Dark blue

#43618a

Light blue

#207DB0

Light gray

#eeeeee

Dark

#4a4a4a

Success

#5cb85c

warn

#f0ad4e

danger

#d9534f

TYPOGRAPHY

Header 1

color:#4a4a4a

Header 2

color:#4a4a4a
Section header
color:#4a4a4a/bg:#eeeee

This is text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

color:#4a4a4a

This is an inline link

color:#0099d5/hover color:darken(#0099d5,7.5%)

COMPONENTS

Alignment

中央よせ

左よせ

右よせ

Text Color

必要に応じて色味を適用しますが、意味なく多色を使用するのは避けてください。

基本的に色味は変更する必要はありません。bootstrapを上書きする場合は他ページとの統一感などに注意！

プライマリーカラー

セカンダリーカラー

デンジャーカラー

ワーニングカラー

ライトグレーカラー

ダークグレーカラー

Button

サイズ固定

Normal

Large

テキストに応じてサイズを可変（最小サイズを固定）

Normal

Large

非活性

SUB BUTTON

新規追加

メニューボタン

Form

Default Form group - search
Default Form group - add
Form with help text/Required item
半角英数12桁まで
Text
disabled readonly
Select
disabled
Multiselect
disabled
Textarea
disabled readonly
Check
Radio
Swith
Segmented control
指名
フリー
未選択
電話予約
disabled
次回予約
直接来店

等幅にしたい場合はsegment__buttonに対してwidthを指定してください。

指名
フリー
未選択
電話予約
disabled
次回予約
直接来店
セグメントスイッチの初期化
common.setSegmentSwitch();
Datepicker
Timepicker
File Upload
ファイル単一選択
ファイル複数選択（サムネイル表示）
ファイル複数選択（リスト表示）
disabled
幅広い業種の店舗管理を支援するクラウド型モバイルPOSレジ
「POS＋(ポスタス)」は、ポスレジ機能はもちろんのこと、店舗の経営改善を行うための様々なデータの利活用、分析が可能です。また、海外出店対応、数多くのシステムとの連携、免税対応など、多彩な機能を低価格でご提供しています。
飲食店向け「POS＋ food（ポスタスフード）」、理美容室向け「POS＋ beauty（ポスタスビューティ）」、小売店向け「POS＋ retail（ポスタスリテール）」の、それぞれの業界の特性に合わせたラインナップをご用意することで、幅広い業種の店舗管理をご支援しています。

Step navigation

Step1 title
Step2 title
Step3 title
Step4 title

Tables

Normal
Header1 Header2 Header3 Header4
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
複数列ヘッダー
Header1 Header2 Header3 Header4
Header3-1 Header3-2 Header4-1 Header4-2
Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell
Datatable
Header1 Header2 Header3 Header4
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Normal
                          
$(document).ready(function () {
    common.table = $("#datatable-sample1").dataTable({
        // 件数切替機能 無効
        lengthChange: false,
        // 検索機能 無効
        searching: false,
        // ソート機能 無効
        ordering: true,
        // ソート機能 初期状態
        // 例：order: [ [ 1, "asc" ] ]
        // 情報表示 無効
        info: false,
        // ページング機能 無効
        paging: false,
        //縦方向のスクロール 有効
        scrollY: "20vh",
        //横方向のスクロール　無効
        scrollX: false,
        //特定のカラムのソート制御
        columnDefs: [{ targets: "no-sorting",orderable: false }],
        //件数が少ない時に縦サイズを省略する
        scrollCollapse: true
    });
});
Datatable複数列ヘッダー
Header1 Header2 Header3
Header3-1 Header3-2
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell
Datatableデータエクスポート
Header1 Header2 Header3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
データエクスポート
buttonsに指定する場合は、別途js/cssファイルの読み込みが必要です。
詳細はこちら 
                            
$(document).ready(function () {
  common.table = $("#datatable-sample3").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //ファイル出力
    dom: 'Bfrtip',
    buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ]
  });
});
Datatable fixedcolumns
Header1 Header2 Header3 Header4 Header5 Header6 Header7 Header8 Header9 Header10 Header11 Header12
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
fixedcolumns
                              
$(document).ready(function () {
  common.table = $("#datatable-sample4").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //横方向のスクロール 有効
    scrollX: true,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //列固定：2列
    fixedColumns: {
      leftColumns: 2,
    },
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //特定のカラムの制御
    columnDefs: [{ targets: [0, 1], width: 100 },
    { targets: [2, 3, 4], width: 80 }]
  });
});
//hover対応
$(document).on({
  mouseenter: function () {
    trIndex = $(this).index() + 1;
    $("table.example-datatable-4").each(function (index) {
      $(this).find("tr:eq(" + trIndex + ")").each(function (index) {
        $(this).find("td").addClass("hover");
      });
    });
  },
  mouseleave: function () {
    trIndex = $(this).index() + 1;
    $("table.example-datatable-4").each(function (index) {
      $(this).find("tr:eq(" + trIndex + ")").each(function (index) {
        $(this).find("td").removeClass("hover");
      });
    });
  }
}, ".example-datatable-4 tr");
$(window).on("resize", function () {
  common.table.fnAdjustColumnSizing();
});
Datatable rowreorder
Seq. Name Age
1 Ben Affleck 47
2 Christian Bale 45
3 Adam West 88
4 Michael Keaton 68
rowreorder
reorderに指定する場合は、別途jsファイルの読み込みが必要です。
詳細はこちら 
                                                
$(document).ready(function () {
  common.table = $("#datatable-sample5").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //並び替え機能　有効
    rowReorder: true,
    rowReorder: {
      selector: 'td:last-child'
    },
    //特定カラムの制御
    columnDefs: [
      { orderable: true, className: 'reorder', targets: 0 },
      { orderable: false, targets: '_all' }
    ]
  });
});
Datatable empty
Header1 Header2 Header3
empty
                              
$(document).ready(function () {
  common.table = $("#datatable-sample6").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //0件表示の時の文言をカスタムする
    "language": {
      "emptyTable": "何もないよ"
    }
  });
});
その他Datatable操作についてはこちら：Datatable reference

Cards

Normal
タイトル
コンテンツ
List
タイトル
  • リストの項目
  • リストの項目
チェックボックスグループ
2列表記
1列表記
チェックボックス、セレクトボックスグループ

Tooltip

top
right
left
bottom

Badge

NEW NEW NEW NEW NEW NEW NEW

Modals

Collapse

example
example text

Alerts

Default alert
Dismissible alert

Alerts

Alerts

Confirm

Tabulator

tabulator v4.9.1

http://tabulator.info/docs/4.9

下記以外はサンプルページを参照してください サンプルページ

基本的な使い方

HTML
                          <div id="tabulator-table" class="tabulator"></div>
<script>
const columns = [
  { title: "名前", field: "name", width: 150 },
  { title: "年齢", field: "age", hozAlign: "left", formatter: "progress", variableHeight: false , formatterParams: {
    color: ["#057FE1"]
  }},
  { title: "好きな色", field: "col" },
  { title: "生年月日", field: "dob", sorter: "date", hozAlign: "center" },
]
var tabledata = [
  { id: 1, name: "山田　慎太郎", age: "12", col: "赤", dob: "" },
  { id: 2, name: "鈴木　隆氏", age: "1", col: "青", dob: "1982/05/14" },
  { id: 3, name: "佐藤　英一郎", age: "42", col: "緑", dob: "1982/05/22" },
  { id: 4, name: "中村　孝太郎", age: "125", col: "オレンジ", dob: "1980/08/01" },
  { id: 5, name: "森　雅弘", age: "16", col: "黄色", dob: "1999/01/31" },
];
var table = new Tabulator("#tabulator-table", {
  height: 200,
  data: tabledata,
  layout: "fitColumns",
  columns: columns,
  rowClick: function (e, row) {
    alert("Row " + row.getData().id + " Clicked!!!!");
  },
});
</script>

編集モード

編集した後はcellに対してdata_modifiedクラスを付与してください。
入力不可の列に対してはdisable_editクラスを付与してください。
方法はサンプルを参照ください。

HTML
                          <div id="edit-table" class="tabulator"></div>
<script>
var tabledata = [
  { id: 1, name: "山田　慎太郎", age: "12", col: "赤", dob: "" },
  { id: 2, name: "鈴木　隆氏", age: "1", col: "青", dob: "1982/05/14" },
  { id: 3, name: "佐藤　英一郎", age: "42", col: "緑", dob: "1982/05/22" },
  { id: 4, name: "中村　孝太郎", age: "125", col: "オレンジ", dob: "1980/08/01" },
  { id: 5, name: "森　雅弘", age: "16", col: "黄色", dob: "1999/01/31" },
];
var dateEditor = function (cell, onRendered, success, cancel) {
  const format = "YYYY/MM/DD";
  const unique_str = common.getUniqueStr();
  const cellValue = moment(cell.getValue()).format(format);

  input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("id", unique_str);
  input.classList.add("datepicker")
  input.classList.add("input-item-sm")
  input.classList.add("d-inline-block")
  if (cellValue == "Invalid date") {
    input.value = "";
  } else {
    input.value = cellValue;
  }
  onRendered(function () {
    input.style.height = "100%";
    input.style.width = "100%";
  });

  function onChange() {
    if (input.value != cellValue) {
      success(moment(input.value).format(format));
    } else {
      cancel();
    }
  }

  //inputの描画後にする処理
  setTimeout(() => {
    const selector = "#" + unique_str;
    $(
      selector
    ).bootstrapMaterialDatePicker(options).on("open",x=>{
      common.setDatepickerChecker(x,options)
    })
    .on("close", e => {
      onChange(e);
    });
    // focusによって起動させるためにblur>focus
    input.blur();
    input.focus();
  }, 10)

  return input;
};
const edit_params = {
  values: {
    "red": "赤",
    "blue": "青",
    "green": "緑",
    "orange": "オレンジ",
    "yellow": "黄色"
  }
};
const edit_columns = [
  { title: "名前", field: "name", width: 150, editor: true, cssClass: "disable_edit" },
  {
    title: "年齢", field: "age", hozAlign: "left", formatter: "progress", editor: true, formatterParams: {
      color: ["#057FE1"]
    }
  },
  { title: "好きな色", field: "col", editor: true },
  { title: "生年月日", field: "dob", sorter: "date", hozAlign: "center", editor: dateEditor },
]
var tableEdit = new Tabulator("#edit-table", {
  data: tabledata,
  layout: "fitColumns",
  columns: edit_columns,
  cellEdited:function(cell){
    cell.getElement().classList.add("data_modified");
  },
});
</script>