Skip to content

Commit dff719e

Browse files
mckervincmckervinc
authored
Merge pull request #91 from mckervinc/feature/tailwind
Feature: Update Docs + add more classes
2 parents 5be2ada + 41573a1 commit dff719e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+3374
-2157
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
# CHANGELOG
22

3+
## 0.6.0
4+
5+
_2024-06-74_
6+
7+
### Features
8+
9+
- **BREAKING:** `clearSizeCache` signature has changed. The second argument is now an optional object that takes a `forceUpdate` boolean and a `timeout`. Both are optional.
10+
- For columns, added `headerCellClassname` and `contentCellClassname`
11+
- when `headerHeight` is set, the header's height will actually be that height
12+
- _DOCS:_ removed `styled-components` and `semantic`
13+
314
## 0.5.7
415

516
_2024-06-14_

‎example/.eslintrc.cjs‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
module.exports = {
2-
root: true,
3-
env: { browser: true, es2020: true },
42
extends: [
5-
'eslint:recommended',
6-
'plugin:@typescript-eslint/recommended',
7-
'plugin:react-hooks/recommended',
3+
"eslint:recommended",
4+
"plugin:@typescript-eslint/recommended",
5+
"prettier"
86
],
9-
ignorePatterns: ['dist', '.eslintrc.cjs'],
10-
parser: '@typescript-eslint/parser',
11-
plugins: ['react-refresh'],
7+
parser: "@typescript-eslint/parser",
8+
plugins: ["@typescript-eslint"],
129
rules: {
13-
'react-refresh/only-export-components': [
14-
'warn',
15-
{ allowConstantExport: true },
10+
eqeqeq: ["error", "smart"],
11+
"no-unused-vars": "off",
12+
"@typescript-eslint/no-explicit-any": "warn",
13+
"@typescript-eslint/no-unused-vars": [
14+
"error",
15+
{
16+
argsIgnorePattern: "^_",
17+
varsIgnorePattern: "^_",
18+
caughtErrorsIgnorePattern: "^_"
19+
}
1620
],
17-
},
18-
}
21+
"no-console": [
22+
"error",
23+
{
24+
allow: ["warn", "error"]
25+
}
26+
]
27+
}
28+
};

‎example/.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"plugins": ["prettier-plugin-tailwindcss"],
3+
"arrowParens": "avoid",
4+
"semi": true,
5+
"trailingComma": "none",
6+
"printWidth": 120
7+
}

‎example/components.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/index.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>react-fluid-table</title>
77
</head>
88
<body>
9-
<div id="root" style="height: 100%;"></div>
9+
<div id="root"></div>
1010
<script type="module" src="/src/main.tsx"></script>
1111
</body>
1212
</html>

‎example/package.json‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,50 @@
1313
"preview": "vite preview"
1414
},
1515
"dependencies": {
16+
"@fortawesome/fontawesome-svg-core": "^6.5.2",
17+
"@fortawesome/free-brands-svg-icons": "^6.5.2",
18+
"@fortawesome/free-regular-svg-icons": "^6.5.2",
19+
"@fortawesome/free-solid-svg-icons": "^6.5.2",
20+
"@fortawesome/react-fontawesome": "^0.2.2",
1621
"@ngneat/falso": "^7.2.0",
22+
"@radix-ui/react-accordion": "^1.1.2",
23+
"@radix-ui/react-checkbox": "^1.0.4",
24+
"@radix-ui/react-label": "^2.0.2",
25+
"@radix-ui/react-popover": "^1.0.7",
26+
"@radix-ui/react-radio-group": "^1.1.3",
27+
"@radix-ui/react-slot": "^1.0.2",
28+
"@radix-ui/react-switch": "^1.0.3",
29+
"class-variance-authority": "^0.7.0",
30+
"clsx": "^2.1.1",
31+
"country-flag-icons": "^1.5.12",
1732
"lodash": "^4.17.21",
33+
"lucide-react": "^0.395.0",
1834
"react": "^18.2.0",
1935
"react-dom": "^18.2.0",
2036
"react-fluid-table": "link:..",
2137
"react-router-dom": "^6.23.1",
2238
"react-syntax-highlighter": "^15.5.0",
23-
"semantic-ui-css": "^2.5.0",
24-
"semantic-ui-react": "^2.1.5",
25-
"styled-components": "^6.1.11"
39+
"tailwind-merge": "^2.3.0",
40+
"tailwindcss-animate": "^1.0.7"
2641
},
2742
"devDependencies": {
2843
"@types/lodash": "^4.17.4",
44+
"@types/node": "^20.14.2",
2945
"@types/react": "^18.2.15",
3046
"@types/react-dom": "^18.2.7",
3147
"@types/react-syntax-highlighter": "^15.5.13",
3248
"@typescript-eslint/eslint-plugin": "^6.0.0",
3349
"@typescript-eslint/parser": "^6.0.0",
3450
"@vitejs/plugin-react": "^4.3.0",
51+
"autoprefixer": "^10.4.19",
3552
"eslint": "^8.57.0",
36-
"eslint-plugin-react-hooks": "^4.6.2",
37-
"eslint-plugin-react-refresh": "^0.4.7",
53+
"eslint-config-prettier": "^9.1.0",
54+
"postcss": "^8.4.38",
55+
"prettier": "^3.3.2",
56+
"prettier-plugin-tailwindcss": "^0.6.4",
57+
"tailwindcss": "^3.4.4",
3858
"typescript": "^5.4.5",
39-
"vite": "^5.2.11"
59+
"vite": "^5.3.1"
4060
},
4161
"volta": {
4262
"node": "18.17.0",

‎example/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎example/src/App.tsx‎

Lines changed: 69 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,82 @@
11
import { RouterProvider, createHashRouter } from "react-router-dom";
22
import "react-fluid-table/dist/index.css";
3-
import Page from "./Page";
43
import Props from "./Props";
5-
import { Example1, Source as Example1Code } from "./examples/01-base";
6-
import { Example2, Source as Example2Code } from "./examples/02-sort";
7-
import { Example3, Source as Example3Code } from "./examples/03-sub";
8-
import { Example4, Source as Example4Code } from "./examples/04-custom";
9-
import { Example5, Source as Example5Code } from "./examples/05-variable";
10-
import { Example6, Source as Example6Code } from "./examples/06-expanded";
11-
import { Example7, Source as Example7Code } from "./examples/07-controlled";
12-
import { Example8, Source as Example8Code } from "./examples/08-header";
13-
import { Example9, Source as Example9Code } from "./examples/09-scroll";
14-
import { Example10, Source as Example10Code } from "./examples/10-footer";
15-
import { Example11, Source as Example11Code } from "./examples/11-heights";
16-
import { Example12, Source as Example12Code } from "./examples/12-frozen";
4+
import { Example1 } from "./examples/01-base";
5+
import { Example2 } from "./examples/02-sort";
6+
import { Example3 } from "./examples/03-sub";
7+
import { Example4 } from "./examples/04-custom";
8+
import { Example5 } from "./examples/05-variable";
9+
import { Example6 } from "./examples/06-expanded";
10+
import { Example7 } from "./examples/07-controlled";
11+
import { Example8 } from "./examples/08-header";
12+
import { Example9 } from "./examples/09-scroll";
13+
import { Example10 } from "./examples/10-footer";
14+
import { Example11 } from "./examples/11-heights";
15+
import { Example12 } from "./examples/12-frozen";
16+
import Layout from "./components/Layout";
1717

1818
const router = createHashRouter([
1919
{
20-
path: "/",
21-
element: (
22-
<Page title="Basic Table" code={Example1Code}>
23-
<Example1 />
24-
</Page>
25-
)
26-
},
27-
{
28-
path: "/sort",
29-
element: (
30-
<Page title="Sortable Table" code={Example2Code}>
31-
<Example2 />
32-
</Page>
33-
)
34-
},
35-
{
36-
path: "/sub",
37-
element: (
38-
<Page title="Table with Subcomponent" code={Example3Code}>
39-
<Example3 />
40-
</Page>
41-
)
42-
},
43-
{
44-
path: "/custom",
45-
element: (
46-
<Page title="Cell Content" code={Example4Code}>
47-
<Example4 />
48-
</Page>
49-
)
50-
},
51-
{
52-
path: "/variable",
53-
element: (
54-
<Page title="Variable Row Size" code={Example5Code}>
55-
<Example5 />
56-
</Page>
57-
)
58-
},
59-
{
60-
path: "/expanded",
61-
element: (
62-
<Page title="Expanded Row Height" code={Example6Code}>
63-
<Example6 />
64-
</Page>
65-
)
66-
},
67-
{
68-
path: "/controlled",
69-
element: (
70-
<Page title="Controlled Props" code={Example7Code}>
71-
<Example7 />
72-
</Page>
73-
)
74-
},
75-
{
76-
path: "/header",
77-
element: (
78-
<Page title="Custom Styling" code={Example8Code}>
79-
<Example8 />
80-
</Page>
81-
)
82-
},
83-
{
84-
path: "/scroll",
85-
element: (
86-
<Page title="Methods" code={Example9Code}>
87-
<Example9 />
88-
</Page>
89-
)
90-
},
91-
{
92-
path: "/footer",
93-
element: (
94-
<Page title="Footer" code={Example10Code}>
95-
<Example10 />
96-
</Page>
97-
)
98-
},
99-
{
100-
path: "/heights",
101-
element: (
102-
<Page title="Table Heights" code={Example11Code}>
103-
<Example11 />
104-
</Page>
105-
)
106-
},
107-
{
108-
path: "/frozen",
109-
element: (
110-
<Page title="Frozen" code={Example12Code}>
111-
<Example12 />
112-
</Page>
113-
)
114-
},
115-
{
116-
path: "/props",
117-
element: (
118-
<Page>
119-
<Props />
120-
</Page>
121-
)
20+
element: <Layout />,
21+
children: [
22+
{
23+
path: "/",
24+
element: <Example1 />
25+
},
26+
{
27+
path: "/sort",
28+
element: <Example2 />
29+
},
30+
{
31+
path: "/sub",
32+
element: <Example3 />
33+
},
34+
{
35+
path: "/custom",
36+
element: <Example4 />
37+
},
38+
{
39+
path: "/variable",
40+
element: <Example5 />
41+
},
42+
{
43+
path: "/expanded",
44+
element: <Example6 />
45+
},
46+
{
47+
path: "/controlled",
48+
element: <Example7 />
49+
},
50+
{
51+
path: "/header",
52+
element: <Example8 />
53+
},
54+
{
55+
path: "/scroll",
56+
element: <Example9 />
57+
},
58+
{
59+
path: "/footer",
60+
element: <Example10 />
61+
},
62+
{
63+
path: "/heights",
64+
element: <Example11 />
65+
},
66+
{
67+
path: "/frozen",
68+
element: <Example12 />
69+
},
70+
{
71+
path: "/props",
72+
element: <Props />
73+
}
74+
]
12275
}
12376
]);
12477

12578
function App() {
126-
return (
127-
<>
128-
<RouterProvider router={router} />
129-
</>
130-
);
79+
return <RouterProvider router={router} />;
13180
}
13281

13382
export default App;

0 commit comments

Comments
 (0)