Next.js + shadcn/ui + TanStackTableでモダンなテーブルを作ろう
テーブルの実装には、react-data-table-componentや、MUIのDataGrid、MantineUIのMantineDataTableなどが用いられてきました。 今回はテーブルのHeadressUIライブラリであるTanstackTableと、RadixUIとTailwindCSSで実装したコンポーネント群であるshadcn/uiを使って、簡単なテーブルを作ります。 shadcn/uiについて Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. あなたのアプリにコピー＆ペーストできる、美しくデザインされたコンポーネント。アクセスしやすい。カスタマイズ可能。オープンソース。（機械翻訳） shadc
LPやWeb製作を高速化するUIコンポーネント集を作った
リンク コンポーネントの例 概要とモチベーション Camome UI はひとことで言うと「抽象度の高い UI コンポーネント集」です。 Bootstrap や MUI などのフレームワーク・ライブラリの類とは異なり、網羅的・汎用的なパーツを提供することが目的ではありません。つまり Button や Input や、もう少しハイレベルな Navbar などを高いカスタマイズ性とともに提供するつもりはありません。 それよりも「LP のこの部分にコピペすればサクッと決まる」ような体験を重視しています。UI デザインといっても、多くの場合はそれほど変わったものが求められるわけではなく、使い回せるものが大半だと思います。 要するに「デザインの常套句」みたいなものが存在するわけです。Camome UI はそういう「よくある」デザインをたくさん収録することを目的としています。 プログラミングは得意でもデ
同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。 CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。 Tailwind Starter Kit Tailwind Starter Kit -GitHub Tailwind Starter Kitの特徴 Tailwind Starter Kitのデモ Tailwind Starter Kitの使い方 Tailwind Starter Kitの特徴 Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できま
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」:phpspot開発日誌
jKit - jQuery based UI Toolkit - Index スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 １つのライブラリで様々な機能を実現できます。必要に応じて読み込む必要がありますが、基本的にマークアップと属性をベースに記述でき、スクリプトを可能な限り書かないでもよいような実装ができるみたい。 スライドショー LightBox ソータブルなテーブル 簡易グラフ スクリプトを書くのが苦手という方は使ってみてもよさそうなライブラリでした。 関連エントリ 超クールなjQueryUIテーマ「Delta」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI
超クールなjQueryUIテーマ「Delta」:phpspot開発日誌
Delta - The Free jQuery UI Theme from Kiandra IT 超クールなjQueryUIテーマ「Delta」。 次のようなUIパーツでのWEBページを実現することが可能です。 TwitterBootstrapもカッコいいわけですが、こういうUIもいいですね。 かなりアップル意識している感じですが。 背景がブラックなバージョンもクール こういうものがもっともっと増えていってリッチなWEBサイトがどんどん増えていくといいですね 関連エントリ フリーのハイクオリティでレスポンシブなWordPressテーマ３０ Windows8風のTwitterBootstrapをベースとしたテーマ「BootMetro」 使えそうなレスポンシブ対応のWordPressテーマ３０
jQuery UIのデザインをオリジナルに変更したサンプル - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザインが若干使いにく いんですよね。 jQuery UIのデザインを変更するやつです。正直、公式で用意してくれているデザインは沢山あるんですが、どれも少々使いにくい感じなので自分で作るしか無いわけですが、結構面倒です。 で、今日紹介するサンプルはBootstrapっぽい感じで割りと使いやすいのではないかと思ってメモがてら記事にします。 Selene こんな感じ。以下動作サンプルです。 Sample 使い方は変わらないです。CSSだけSeleneっ
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」（デブサミ2012）で、サイボウズ株式会社 開発部 若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏～大規模JavaScript開発と非構造データベース」を行いました。 講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI - かちびと.net
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。 数じゃ敵いませんけど、Ext JSのjQuery依存型みたいな印象です。結構昔からあるみたいなので知ってる方も多いかもですけど・・・恥ずかしながら最近知ったので、僕と同様にまだ知らない方向けにシェア。 jQueryを使ったシンプルなユーザーインターフェースを構築する為のプラグイン30数個をワンセットにしているフレームワークです。余計な機能が付いていないものばかりなのでカスタムしやすいのでは。 コードはドキュメントに全部書いてありますので割愛します。 プラグインの一部をご紹介します。 Accordion 開閉するアコーディオン Menu シンプルなメニュー Panel パ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Official Tailwind UI Components & Templates - Tailwind Plus
GitHub - bluwy/whyframe: Develop components in isolation with just an iframe
Macaron | Visual component editor for Web development
Notyf: A minimalist JavaScript library for toast notifications.