knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[catalog/dataset page][m]: implement dataset page using tailwindui assets.

Browse Source
This commit is contained in:
anuveyatsu
2021-08-25 10:50:12 +06:00
parent feb1fd62f4
commit f2629cb195
4 changed files with 114 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
examples/catalog/components/_shared/Table.tsx
View File

@@ -6,30 +6,47 @@ interface TableProps {
const Table: React.FC<TableProps> = ({ columns, data, className }) => {
return (
<table className={`table-auto w-full text-sm text-left my-6 ${className}`}>
<thead>
<tr>
{columns.map(({ key, name }) => (
<th key={key} className="px-4 py-2">
{name}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item) => (
<tr key={item.id}>
{columns.map(({ key, render }) => (
<td key={key} className="px-4 py-2">
{(render && typeof render === 'function' && render(item)) ||
item[key] ||
''}
</td>
))}
</tr>
))}
</tbody>
</table>
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table
className={`min-w-full divide-y divide-gray-200 ${className}`}
>
<thead className="bg-gray-50">
<tr>
{columns.map(({ key, name }) => (
<th
key={key}
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{name}
</th>
))}
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{data.map((item) => (
<tr key={item.id}>
{columns.map(({ key, render }) => (
<td
key={key}
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
>
{(render &&
typeof render === 'function' &&
render(item)) ||
item[key] ||
''}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
};