feat: 添加table示例

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@blueprintjs/core": "^5.14.2",
     "@blueprintjs/icons": "^5.14.0",
+    "@blueprintjs/table": "^5.2.5",
     "icons": "link:@blueprintjs\\icons",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@blueprintjs/icons':
         specifier: ^5.14.0
         version: 5.14.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@blueprintjs/table':
+        specifier: ^5.2.5
+        version: 5.2.5(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       icons:
         specifier: link:@blueprintjs\icons
         version: link:@blueprintjs/icons
@@ -91,6 +94,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@blueprintjs/table@5.2.5':
+    resolution: {integrity: sha512-/ztE5tIq+JOC75WBVEGELpTw83MhOaXBIObODMO5ZZtECy9WtVKd6aQo/s2A3YZSioUsmNLxJpR2Df49dPpWEA==}
+    peerDependencies:
+      '@types/react': ^16.14.41 || 17 || 18
+      react: ^16.8 || 17 || 18
+      react-dom: ^16.8 || 17 || 18
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -938,6 +951,12 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-innertext@1.1.5:
+    resolution: {integrity: sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==}
+    peerDependencies:
+      '@types/react': '>=0.0.0 <=99'
+      react: '>=0.0.0 <=99'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -1150,6 +1169,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@blueprintjs/table@5.2.5(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@blueprintjs/core': 5.14.2(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      classnames: 2.5.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-innertext: 1.1.5(@types/react@18.3.12)(react@18.3.1)
+      tslib: 2.6.3
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -1919,6 +1949,11 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-innertext@1.1.5(@types/react@18.3.12)(react@18.3.1):
+    dependencies:
+      '@types/react': 18.3.12
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -1,6 +1,13 @@
 import { useState } from 'react'
 import { Button, ButtonGroup, AnchorButton } from "@blueprintjs/core";
+import { Cell, Column, Table2 } from "@blueprintjs/table";
 
+const dollarCellRenderer = (rowIndex: number) => (
+  <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>
+);
+const euroCellRenderer = (rowIndex: number) => (
+  <Cell>{`€${(rowIndex * 10 * 0.85).toFixed(2)}`}</Cell>
+);
 function App() {
   const [count, setCount] = useState(0)
 
@@ -16,6 +23,10 @@ function App() {
           <AnchorButton rightIcon="caret-down">Options</AnchorButton>
         </ButtonGroup>
       </div>
+      <Table2 numRows={10}>
+        <Column name="Dollars" cellRenderer={dollarCellRenderer} />
+        <Column name="Euros" cellRenderer={euroCellRenderer} />
+      </Table2>
     </>
   )
 }

src/index.css

@@ -1,3 +1,4 @@
 @import "normalize.css";
 @import "@blueprintjs/core/lib/css/blueprint.css";
 @import "@blueprintjs/icons/lib/css/blueprint-icons.css";
+@import "@blueprintjs/table/lib/css/table.css";