wip on switching from docz to docusaurus
This commit is contained in:
1 parent
69e36106e3
commit
09469e6ac5
97 files changed
+1505
-7132
No files matched your search
@@ -1,62 +0,0 @@
|
||||
---
|
||||
name: Study List Table
|
||||
menu: Data Display
|
||||
route: components/studyListTable
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListTable } from '../';
|
||||
|
||||
# StudyListTable
|
||||
|
||||
This component is used to display a studies list.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyListTable } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const studies = new Array(10).fill('');
|
||||
const [expandedRows, setExpandedRows] = useState([]);
|
||||
const tableDataSource = studies.map((study, key) => {
|
||||
const rowKey = key + 1;
|
||||
const isExpanded = expandedRows.some((k) => k === rowKey);
|
||||
return {
|
||||
row: [
|
||||
{ key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
|
||||
{ key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
|
||||
{ key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
|
||||
{ key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
|
||||
],
|
||||
expandedContent: (
|
||||
<td className="w-full p-8">
|
||||
Custom expanded content for row {rowKey}
|
||||
</td>
|
||||
),
|
||||
onClickRow: () =>
|
||||
setExpandedRows((rows) =>
|
||||
isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
|
||||
),
|
||||
isExpanded,
|
||||
};
|
||||
});
|
||||
return (
|
||||
<div className="py-4">
|
||||
<StudyListTable
|
||||
tableDataSource={tableDataSource}
|
||||
numOfStudies={studies.length}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListTable} />
|
||||
Reference in new issue
Block a user