タグ

tableに関するnorandoのブックマーク (3)

  • Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT

    テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

    Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
  • Vue.jsでTableをソートしたり検索したりしてみる

    Posted: 2017.01.16 / Category: javascript Vue.js 2.0 を使用してTableで並べたリストの検索フィルターとかソートなどをやってみます。 データをテーブルに表示する 最初に表示するデータを作成して、tableにシンプルに表示してみましょう。 大まかにデータを入れる(data)、ボタンクリック時などに実行される(methods)、フィルター処理を記述する(computed)を作成していきます。 JavaScript var app = new Vue({ el: '#app', data: { }, methods: { }, computed: { } }); ではdataに表示するデータを記述していきましょう。 今回はタスクリストを想定して作成してきます。 JavaScript data: function () { var column

    Vue.jsでTableをソートしたり検索したりしてみる
  • CSS:角丸のテーブルを作成する方法 - NxWorld

    テーブルをCSSを使って角丸にする方法です。 以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。 角丸テーブルの完成イメージ 以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。 実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。 あるプロパティが指定されていると角丸にならない CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されて

    CSS:角丸のテーブルを作成する方法 - NxWorld
    norando
    norando 2016/12/30
    ハマったらみるやつ
  • 1