Skip to content

Commit

Permalink
table style
Browse files Browse the repository at this point in the history
  • Loading branch information
@sinamics
sinamics committed Apr 8, 2023
1 parent cf7e9a3 commit e292518
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 161 deletions.
41 changes: 20 additions & 21 deletions src/components/modules/deletedNetworkMembersTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,33 +43,30 @@ export const DeletedNetworkMembersTable = ({ nwid }) => {
() => [
{
Header: "Authorized",
accessor: () => <span>No</span>,
accessor: () => <span>no</span>,
},
{
Header: "Member name",
accessor: "name",
width: 300,
// width: 300,
},
{
Header: "ID",
accessor: "id",
},
{
Header: "IP / Latency",
width: 170,
},

{
Header: "Created",
accessor: (d: string) => <TimeAgo date={d["creationTime"]} />,
},

{
Header: "Conn Status",
accessor: () => <span>Zombie</span>,
accessor: () => <span>zombie</span>,
},
{
Header: "Action",
width: 190,
// width: 190,
accessor: ({ id }: NetworkMembersEntity) => {
return (
<button
Expand All @@ -90,7 +87,9 @@ export const DeletedNetworkMembersTable = ({ nwid }) => {
],
[]
);

const defaultColumn = {
width: "auto",
};
const sortees = React.useMemo(
() => [
{
Expand All @@ -109,35 +108,32 @@ export const DeletedNetworkMembersTable = ({ nwid }) => {
{
columns,
data,
// defaultColumn,
initialState: {
sortBy: sortees,
},
},
useBlockLayout,
useResizeColumns,
// useBlockLayout,
// useResizeColumns,
useSortBy
);

return (
<div className="relative overflow-x-auto rounded-lg border">
<span className="pt-2">
<table
className="divide-y divide-gray-400 text-center"
className="w-full overflow-x-auto border border-gray-500"
{...getTableProps()}
>
<thead className="bg-base-100">
{
// Loop over the header rows
headerGroups.map((headerGroup) => (
// Apply the header row props
<tr {...headerGroup.getHeaderGroupProps()}>
<tr {...headerGroup.getHeaderGroupProps()} className="">
{
// Loop over the headers in each row
headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps()}
scope="col"
className="py-3 pl-4"
>
<th {...column.getHeaderProps()} className="py-3 pl-4">
{
// Render the header
column.render("Header")
Expand All @@ -156,7 +152,10 @@ export const DeletedNetworkMembersTable = ({ nwid }) => {
))
}
</thead>
<tbody {...getTableBodyProps()} className=" divide-y divide-gray-200 ">
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 border "
>
{
// Loop over the table rows
rows.map((row) => {
Expand Down Expand Up @@ -192,6 +191,6 @@ export const DeletedNetworkMembersTable = ({ nwid }) => {
}
</tbody>
</table>
</div>
</span>
);
};
246 changes: 122 additions & 124 deletions src/components/modules/networkMembersTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,6 @@ export const NetworkMembersTable = ({ nwid }) => {
{
Header: "ID",
accessor: "id",
// maxWidth: 200,
// width: 150,
},
{
Header: "IP / Latency",
Expand Down Expand Up @@ -255,6 +253,7 @@ export const NetworkMembersTable = ({ nwid }) => {
},
{
Header: "Action",
width: 190,
accessor: ({ id }) => {
return (
<button
Expand Down Expand Up @@ -325,6 +324,7 @@ export const NetworkMembersTable = ({ nwid }) => {
};
// Set our editable cell renderer as the default Cell renderer
const defaultColumn = {
with: "auto",
Cell: EditableCell,
};
const sortees = React.useMemo(
Expand Down Expand Up @@ -354,136 +354,134 @@ export const NetworkMembersTable = ({ nwid }) => {
);

return (
<div className="flex flex-col ">
<div className="overflow-x-auto">
<div className="flex justify-between py-3 pl-2">
<div className="relative max-w-xs">
<label htmlFor="hs-table-search" className="sr-only">
Search
</label>
<input
type="text"
name="hs-table-search"
id="hs-table-search"
className="block w-full rounded-md border-gray-200 p-3 pl-10 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
placeholder="Search..."
/>
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
<svg
className="h-3.5 w-3.5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
<>
<div className="flex justify-between py-3 pl-2">
<div className="relative hidden max-w-xs lg:flex">
<label htmlFor="hs-table-search" className="sr-only">
Search
</label>
<input
type="text"
name="hs-table-search"
id="hs-table-search"
className="block w-full rounded-md border-gray-200 p-3 pl-10 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
placeholder="Search..."
/>
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
<svg
className="h-3.5 w-3.5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
</div>

<div className="flex items-center space-x-2">
<div className="relative">
<button className="focus:ring-accent-500 focus:border-accent-500 relative z-0 inline-flex rounded-md text-sm shadow-sm hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1">
<span className="relative inline-flex items-center space-x-2 rounded-md border border-gray-300 bg-white px-3 py-3 text-sm font-medium text-gray-600 sm:py-2">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
/>
</svg>
</div>
<div className="hidden sm:block">Filters</div>
</span>
</button>
</div>
<div className="hidden items-center space-x-2 lg:flex">
<div className="relative">
<button className="focus:ring-accent-500 focus:border-accent-500 relative z-0 inline-flex rounded-md text-sm shadow-sm hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1">
<span className="relative inline-flex items-center space-x-2 rounded-md border border-gray-300 bg-white px-3 py-3 text-sm font-medium text-gray-600 sm:py-2">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
/>
</svg>
</div>
<div className="hidden sm:block">Filters</div>
</span>
</button>
</div>
</div>
</div>

<div className="overflow-x-auto rounded-lg border">
<table {...getTableProps()} className=" divide-y divide-gray-400">
<thead className="bg-base-100">
{
// Loop over the header rows
headerGroups.map((headerGroup) => (
// Apply the header row props
<tr {...headerGroup.getHeaderGroupProps()}>
<div className="rounded-xl pt-2">
<table
{...getTableProps()}
className="divide-y divide-gray-400 overflow-x-auto border border-gray-500"
>
<thead className="bg-base-100">
{
// Loop over the header rows
headerGroups.map((headerGroup) => (
// Apply the header row props
<tr {...headerGroup.getHeaderGroupProps()}>
{
// Loop over the headers in each row
headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps()}
scope="col"
className="py-3 pl-4"
>
{
// Render the header
column.render("Header")
}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))
}
</tr>
))
}
</thead>
<tbody {...getTableBodyProps()} className=" divide-y divide-gray-500">
{
// Loop over the table rows
rows.map((row) => {
// Prepare the row for display
prepareRow(row);
return (
// Apply the row props
<tr
className={`items-center ${
!row.original.authorized
? "border-dotted bg-error bg-opacity-20"
: ""
}`}
{...row.getRowProps()}
>
{
// Loop over the headers in each row
headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps()}
scope="col"
className="py-3 pl-4"
>
{
// Render the header
column.render("Header")
}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))
// Loop over the rows cells
row.cells.map((cell) => {
// Apply the cell props
return (
<td {...cell.getCellProps()} className="py-1 pl-4">
{
// Render the cell contents
cell.render("Cell")
}
</td>
);
})
}
</tr>
))
}
</thead>
<tbody
{...getTableBodyProps()}
className=" divide-y divide-gray-200"
>
{
// Loop over the table rows
rows.map((row) => {
// Prepare the row for display
prepareRow(row);
return (
// Apply the row props
<tr
className={`items-center ${
!row.original.authorized
? "border-dotted bg-error bg-opacity-20"
: ""
}`}
{...row.getRowProps()}
>
{
// Loop over the rows cells
row.cells.map((cell) => {
// Apply the cell props
return (
<td {...cell.getCellProps()} className="py-1 pl-4">
{
// Render the cell contents
cell.render("Cell")
}
</td>
);
})
}
</tr>
);
})
}
</tbody>
</table>
</div>
);
})
}
</tbody>
</table>
</div>
</div>
</>
);
};
Loading

0 comments on commit e292518

Please sign in to comment.