File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -38,7 +38,30 @@ yarn add solid-tabular
3838
3939## Basic Usage
4040
41- The example below shows how to display a static data table with default column widths.
41+ The example below shows how to display a static data table using the ` createTableState ` utility function.
42+
43+ ``` tsx
44+ import { Table , createTableState } from ' solid-tabular'
45+ import ' solid-tabular/styles.css'
46+
47+ function App() {
48+ const tableProps = createTableState ([
49+ { A: 1 , B: 2 , C: 3 },
50+ { A: 4 , B: 5 , C: 6 },
51+ { A: 7 , B: 8 , C: 9 },
52+ ])
53+
54+ return (
55+ <div style = { { width: ' 100%' , padding: ' 20px' }} >
56+ <Table { ... tableProps } columnsResizeable />
57+ </div >
58+ )
59+ }
60+
61+ export default App
62+ ```
63+
64+ This example controls the table data explicitly for more control.
4265
4366``` tsx
4467import { createSignal } from ' solid-js'
@@ -57,7 +80,7 @@ function App() {
5780 ])
5881
5982 return (
60- <div style = { { height : ' 500px ' }} >
83+ <div style = { { width : ' 100% ' , padding: ' 20px ' }} >
6184 <Table
6285 columns = { columns }
6386 numRows = { data ().length }
You can’t perform that action at this time.
0 commit comments