Save 37% off PRO during our Black Friday Sale! »

vue-pivot-table-plus

 vue-pivot-table-plus

vue-pivot-table-plus:
A pivot table component for Vue.js and Bootstrap

Vue.js 向けピボットテーブルライブラリ「vue-pivot-table-plus」 vue-pivot-table-plusは,Vue.js + Bootstrap 環境向けのオープンソースなピボットテーブルコンポーネントです。これは社内の分析ツール向けに、vue-pivot-table というライブラリを fork して開発されています。本ライブラリの開発経緯や活用方法についてご紹介します。

坂口 達彦 / LINE株式会社 Front-end Dev8チーム

※こちらは以下イベントで登壇した資料となります。
https://line.connpass.com/event/210163/
※動画リンクは後日掲載いたします。

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

May 12, 2021
Tweet

Transcript

  1.  vue-pivot-table-plus: A pivot table component for Vue.js and Bootstrap

    Tatsuhiko Sakaguchi
  2.  Tatsuhiko Sakaguchi ࡔޱୡ඙ LINEגࣜձࣾ UIT ϑϩϯτΤϯυ։ൃηϯλʔ Front-end Dev8 νʔϜ

  3.  Tatsuhiko Sakaguchi ࡔޱୡ඙ 2019.2 2019.3~ 2021.4~ 2020.4 Πϯλʔϯγοϓ ΞϧόΠτ

    ৽ଔೖࣾ 2೥໨
  4. LINE Engineer Blog https://engineering.linecorp.com/ja/blog/internship-2019-oasis-front-end/ 

  5.  ໨࣍ ࣗݾ঺հ vue-pivot-table-plus ͷ֓ཁ ಋೖࣄྫ ։ൃ ࠓޙͷൃల

  6.  vue-pivot-table-plus Vue.js + Bootstrap ޲͚ͷϐϘοτςʔϒϧίϯϙʔωϯτ

  7.  vue-pivot-table-plus Vue.js + Bootstrap ޲͚ͷϐϘοτςʔϒϧίϯϙʔωϯτ Open source Improved performance

    Forked vue-pivot-table Customized features
  8.  Open source

  9.  ϐϘοτςʔϒϧ දܗࣜͷσʔλΛूܭ͢Δπʔϧ

  10.  ಈ࡞ ςετσʔλ

  11. 

  12.  Features Bootstrap ready Design updates Additional useful functions Improved

    performance 1ສߦ͍ۙσʔλͰ΋ॲཧՄೳ ϓϩδΣΫτଆͷ Bootstrap Λར༻͢ΔͷͰɼઃఆΛద༻Ͱ͖Δ
  13. ΫϦΞػೳ ιʔτػೳ อଘػೳ  Additional functions

  14.  Design updates vue-pivot-table vue-pivot-table-plus

  15.  Requirements Vue.js v2.x Bootstrap v4.x v3.x ͸ະରԠ v5.x ͸ະରԠ

  16.  ಋೖࣄྫ LINEࣾ಺ͷσʔλ෼ੳπʔϧ

  17.  OASIS : Collaborative data analysis platform

  18.  yanagishima : Presto Web UI

  19.  Data analysis tools ͜ΕΒͷπʔϧ͸ΤϯδχΞҎ֎΋ར༻ શһ͕ SQL ʹৄ͍͠Θ͚Ͱ͸ͳ͍ μ΢ϯϩʔυͯ͠ Excel

    Ͱूܭ͍ͯͨ͜͠ͱ΋ ϐϘοτςʔϒϧػೳͷಋೖ΁
  20.  ಋೖޙ σʔλऔಘͷΫΤϦ͚ͩͰσʔλूܭ͕Մೳʹ Web Ͱશͯͷ෼ੳ͕؆ܿ ۀ຿ͷޮ཰Խ

  21.  ཁ๬ ΧϥϜΛιʔτ͍ͨ͠ ϐϘοτͨ͠ςʔϒϧΛͦͷ··μ΢ϯϩʔυ͍ͨ͠ ύϑΥʔϚϯεΛվળͯ͠΄͍͠ vue-pivot-table-plus ͱͯ͠ެ։΁

  22.  ։ൃ development

  23.  ݕ౼ ಋೖઌπʔϧ͕ Vue.js + Bootstrap Λར༻ σβΠϯ͕ೃછΉΑ͏ʹ OSS ͱͯ͠ར༻Ͱ͖Δ΋ͷΛ

    yanagishima ͸ OSS Ͱެ։͞Ε͍ͯͨ ͜ΕΒΛຬͨ͢ϥΠϒϥϦΛ୳͍ͯͨ͠
  24.  vue-pivot-table https://github.com/Click2Buy/vue-pivot-table

  25.  ಋೖʹ͋ͨͬͯͷ໰୊ ༨ന͕طଘը໘ͱ߹Θͳ͍ ϐϘοτͨ͠ঢ়ଶΛอଘͰ͖ͳ͍ σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ

  26.  ༨ന͕طଘը໘ͱ߹Θͳ͍ OASIS vue-pivot-table

  27.  OASIS vue-pivot-table-plus ༨ന͕طଘը໘ͱ߹Θͳ͍

  28. IUUQTHJUIVCDPN$MJDL#VZWVFQJWPUUBCMFCMPCNBTUFSEFNP"QQWVF IUUQTHJUIVCDPNMJOFWVFQJWPUUBCMFQMVTCMPCNBTUFSEFNP"QQWVF  ϐϘοτͨ͠ঢ়ଶΛอଘͰ͖ͳ͍ v-model Λར༻ͯ͠औΓग़ͤΔΑ͏ʹ vue-pivot-table-plus vue-pivot-table

  29.  σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ 1ສߦ͍ۙσʔλͰ͸ɼ਺ඵఔ౓ϒϥ΢β͕ϑϦʔζ

  30.  + computed property ͷΦʔόϔου =

  31.  σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ ूܭ݁ՌΛ computed property ͱͯ͠อଘ͍ͯͨ͠ Computed property ͸ݩͷσʔλΛґଘઌͱͯ͠ొ࿥͢Δ औಘ࣌΋ؚΊɼେྔͷΦʔόϔου͕ൃੜ

  32.  ͋ΔྫͰ͸ॲཧ + ඳը͕࣌ؒ 1/10 ʹ Computed property watch ಺Ͱ࠶ܭࢉ

    Method ύϑΥʔϚϯεվળ
  33.  OSS ͱͯ͠

  34.  μ΢ϯϩʔυ਺ https://www.npmjs.com/package/vue-pivot-table-plus

  35.  μ΢ϯϩʔυ਺ൺֱ https://www.npmjs.com/package/@marketconnect/vue-pivot-table vue-pivot-table vue-pivot-table-plus https://www.npmjs.com/package/vue-pivot-table-plus

  36.  ࠓޙͷൃల Future work

  37.  ࠓޙͷํ਑ ΧελϚΠζੑͷ޲্ Vue 3ɼBootstrap 5 ΁ͷରԠ TypeScript ରԠ

  38.  ΧελϚΠζੑͷ޲্ slot ͷར༻ ΧελϜϓϩύςΟͷ௥Ճ slot Λར༻Ͱ͖ΔՕॴΛ૿΍ͯ͠ɼσβΠϯͷௐ੔͕Ͱ͖ΔΑ͏ʹ σβΠϯʹؔ͢ΔϓϩύςΟͷ௥Ճ OSS Ͱ͋Δ͕ɼσβΠϯ͸ࣾ಺ͷϓϩμΫτʹ߹Θ͍ͤͯΔ

    ΧελϚΠζੑΛ޲্ͤ͞ɼ༷ʑͳϓϩμΫτͰར༻Ͱ͖ΔΑ͏ʹ
  39.  Vue 3, Bootstrap 5 ΁ͷରԠ ෳ਺ͷ v-model ͷར༻ ݱࡏ

    v-model ͷΦϒδΣΫτ͕ ෳࡶͰ͋Δ ෳ਺ͷ v-model Λར༻͢Δ͜ͱͰ Θ͔Γ΍͘͢ ͲͪΒ΋࠷ۙެ։͞ΕͨͷͰରԠ͍ͨ͠
  40.  TypeScript ΁ͷରԠ Vue 3 ͸ TypeScript Ͱॻ͔ΕΔ͜ͱ͕ଟ͍ ܕΛ༻ҙ͢Δ͜ͱͰ࢖͍΍͘͢

  41.  vue-pivot-table-plus: A pivot table component for Vue.js + Bootstrap

    Future work Improved vue-pivot-table Open source ΦʔϓϯιʔεͰެ։ σʔλ਺͕ଟ͍৔߹ͷ computed property ͸஫ҙ ΧελϚΠζੑͷڧԽɼVue 3 ରԠͳͲ Tatsuhiko Sakaguchi